Bonjour à tous
Dans le navigateur localhost:3000/Profil.html j’ai un petit souci quand, dans la partie liste d’amis de l’administrateur, je clique sur « envoyer une invitation », « accepter l’invitation » et « supprimer », rien ne fonctionne. Pouvez-vous m’aider SVP ? Merci à tous : Voici mon html
<!--Liste d'amis de l'administrateur-->
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-body">
<h5 class="card-title">Liste des Amis de l'administrateur</h5>
<div id="friendsList" class="row"></div>
</div>
<!--Bouton pour supprimer un ami de sa liste d'amis-->
<div class="col-md-4">
<div class="card mb-4">
<img
src="assets/Edouard.png"
class="card-img-top"
alt="Photo de profil"
/>
<div class="card-body">
<h5 class="card-title">
<a
href="#"
class="friend-link"
data-friend-id="ID_DU_MEMBRE"
>Pseudonyme</a
>
</h5>
<p class="card-text">Nom et Prénom</p>
<button
class="btn btn-primary btn-sm sendFriendRequestBtn"
data-friend-id="ID_DU_MEMBRE"
>
Envoyer une invitation
</button>
<!--Acceptation de l'ami à la liste d'amis de l'administrateur -->
<button
class="btn btn-success btn-sm acceptFriendRequestBtn"
data-friend-id="ID_DU_MEMBRE"
>
Accepter l'invitation
</button>
<button
class="btn btn-danger btn-sm deleteFriendBtn"
data-friend-id="ID_DU_MEMBRE"
>
Supprimer
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Confirmation du message-->
<div class="container mt-3">
<div
class="alert alert-success d-none"
id="friendRequestSuccessmessage"
>
Demande d'ami envoyée réussie!
</div>
<!--Acceptation de l'ami-->
<div
class="alert alert-success d-none"
id="friendRequestAcceptedMessage"
>
L'ami a été accepté!
</div>
</div>
</div>
Et Javascript
// Fonction pour chargement et affichage de la liste d'amis de l'administrateur
document.addEventListener("DOMContentLoaded", function () {
const friendsList = document.getElementById("friendsList");
// Fonction pour chargement et affichage des demandes d'amis
const friendRequestsList = document.getElementById("friendRequestsList");
async function loadFriends() {
try {
const response = await fetch("http://localhost:3000/api/friends", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
console.warn("Problème pour obtenir la liste des amis");
alert(
"Problème pour obtenir la liste d'amis. Veuillez réessayer plus tard "
);
return;
}
const data = await response.json();
friendsList.innerHTML = "";
friendRequestsList.innerHTML = "";
if (Array.isArray(data.friends)) {
data.friends.forEach((friend) => {
const friendItem = document.createElement("div");
friendItem.classList.add("col-md-4");
friendItem.innerHTML = \\`<div class="card mb-4"><img class="card-img-top" alt="Photo de profil" src="${friend.profilePictureUrl || "assets/Edouard.png"}"><img class="card-img-top" alt="Photo de profil" src="${friend.profilePictureUrl || "assets/Rose.png"}"><div class="card-body"><h5 class="card-title">${friend.username}</h5><p class="card-text">${friend.fullName}</p>${friend.status === "confirmé"? \<button class="btn btn-danger btn-sm deleteFriendBtn » data-friend-id="${friend.\_id}">Supprimer</button>' : '<button class="btn btn-primary btn-sm acceptFriendRequestBtn » data-friend-id="${friend.\_id}">Accepter l’invitation</button><button class="btn btn-primary btn-sm ignoreFriendRequestBtn » data-friend-id="${friend.\_id}">Ignorer l’invitation</button>'}</div></div>' ; if (friend.status === « confirmé ») {friendsList.appendChild(friendItem) ;} else {friendRequestsList.appendChild(friendItem) ;}}) ; `
// Gestionnaire d'événements pour les boutons de suppression de la liste d'amis de l'administrateur
document.querySelectorAll(".deleteFriendBtn").forEach((button) => {
button.addEventListener("click", async function () {
const friendId = this.getAttribute("data-friend-id");
if (confirm("Etes vous certain de supprimer cet ami?")) {
try {
const response = await fetch(
\http://localhost:3000/api/friends/${friendId}',{method : « DELETE »,headers : {"Content-Type » : « application/json »,},}) ; const data = attendre response.json() ; if (response.ok) {// Message de confirmationconst successMessage = document.getElementById(« friendRemovedMessage ») ; successMessage.classList.remove(« d-none ») ; setTimeout(() => {successMessage.classList.add(« d-none ») ;}, 3000) ; alert(« Ami supprimé avec succès ») ; loadFriends() ;} else {alert(« Erreur lors de la suppression de l’ami : " + data.message) ;}} catch (error) {console.error(« Erreur lors de la suppression de l’ami : « ,error) ; alert(« Erreur lors de la suppression de l’ami : " + error.message) ;}}}) ;}) ;} else {alert(« Erreur lors de la récupération des amis : " + data.message) ;}} catch (error) {console.error(« Erreur lors de la récupération des amis : », error) ; alert(« Erreur lors de la récupération des amis : " + error.message) ;}}`
loadFriends();
});
Il semble qu'il y a plusieurs petits problèmes dans votre code, principalement dans la syntaxe de vos balises HTML et dans la gestion des événements JavaScript. Voici quelques points à corriger et à vérifier :
Dans votre code, vous utilisez des guillemets doubles ("
) dans des endroits où vous avez des backticks (`
). Cela perturbe la création de la chaîne HTML pour les éléments dynamiques. Vous devez remplacer certains guillemets par des backticks pour éviter les erreurs de syntaxe.
querySelectorAll
)La sélection des éléments avec document.querySelectorAll(".deleteFriendBtn")
peut échouer si vous ne mettez pas à jour dynamiquement la liste des boutons après chaque chargement des amis. Vous devez vous assurer que vous attachez les gestionnaires d'événements après que la liste des amis a été chargée.
L'URL de votre API contient des erreurs de syntaxe avec des apostrophes ('
). Assurez-vous que les chaînes de caractères sont correctement formatées.
Je vais corriger ces problèmes dans votre code HTML et JavaScript.
html
<!-- Liste d'amis de l'administrateur -->
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-body">
<h5 class="card-title">Liste des Amis de l'administrateur</h5>
<div id="friendsList" class="row"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Confirmation du message -->
<div class="container mt-3">
<div class="alert alert-success d-none" id="friendRequestSuccessmessage">
Demande d'ami envoyée réussie!
</div>
<div class="alert alert-success d-none" id="friendRequestAcceptedMessage">
L'ami a été accepté!
</div>
</div>
// Fonction pour chargement et affichage de la liste d'amis de l'administrateur
document.addEventListener("DOMContentLoaded", function () {
const friendsList = document.getElementById("friendsList");
const friendRequestsList = document.getElementById("friendRequestsList");
async function loadFriends() {
try {
const response = await fetch("http://localhost:3000/api/friends", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
console.warn("Problème pour obtenir la liste des amis");
alert("Problème pour obtenir la liste d'amis. Veuillez réessayer plus tard");
return;
}
const data = await response.json();
friendsList.innerHTML = "";
friendRequestsList.innerHTML = "";
if (Array.isArray(data.friends)) {
data.friends.forEach((friend) => {
const friendItem = document.createElement("div");
friendItem.classList.add("col-md-4");
friendItem.innerHTML = `
<div class="card mb-4">
<img class="card-img-top" alt="Photo de profil" src="${friend.profilePictureUrl || 'assets/Edouard.png'}">
<div class="card-body">
<h5 class="card-title">${friend.username}</h5>
<p class="card-text">${friend.fullName}</p>
${friend.status === 'confirmé'
? `<button class="btn btn-danger btn-sm deleteFriendBtn" data-friend-id="${friend._id}">Supprimer</button>`
: `<button class="btn btn-primary btn-sm acceptFriendRequestBtn" data-friend-id="${friend._id}">Accepter l’invitation</button>
<button class="btn btn-primary btn-sm ignoreFriendRequestBtn" data-friend-id="${friend._id}">Ignorer l’invitation</button>`
}
</div>
</div>`;
if (friend.status === "confirmé") {
friendsList.appendChild(friendItem);
} else {
friendRequestsList.appendChild(friendItem);
}
});
}
} catch (error) {
console.error("Erreur lors de la récupération des amis :", error);
alert("Erreur lors de la récupération des amis : " + error.message);
}
}
// Gestionnaire d'événements pour les boutons
function attachEventListeners() {
// Suppression de l'ami
document.querySelectorAll(".deleteFriendBtn").forEach((button) => {
button.addEventListener("click", async function () {
const friendId = this.getAttribute("data-friend-id");
if (confirm("Êtes-vous certain de supprimer cet ami ?")) {
try {
const response = await fetch(`http://localhost:3000/api/friends/${friendId}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
if (response.ok) {
const successMessage = document.getElementById("friendRemovedMessage");
successMessage.classList.remove("d-none");
setTimeout(() => {
successMessage.classList.add("d-none");
}, 3000);
alert("Ami supprimé avec succès");
loadFriends(); // Recharger la liste des amis après suppression
} else {
alert("Erreur lors de la suppression de l'ami : " + data.message);
}
} catch (error) {
console.error("Erreur lors de la suppression de l'ami : ", error);
alert("Erreur lors de la suppression de l'ami : " + error.message);
}
}
});
});
// Ajout d'autres gestionnaires pour accepter ou ignorer les invitations si nécessaire.
// Pour accepter l'invitation
document.querySelectorAll(".acceptFriendRequestBtn").forEach((button) => {
button.addEventListener("click", async function () {
const friendId = this.getAttribute("data-friend-id");
try {
const response = await fetch(`http://localhost:3000/api/friends/accept/${friendId}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
if (response.ok) {
alert("Invitation acceptée !");
loadFriends(); // Recharger les amis
} else {
alert("Erreur lors de l'acceptation de l'invitation : " + data.message);
}
} catch (error) {
console.error("Erreur lors de l'acceptation de l'invitation : ", error);
alert("Erreur lors de l'acceptation de l'invitation : " + error.message);
}
});
});
}
loadFriends().then(attachEventListeners); // Charger les amis et attacher les événements
});