Cela fais plusieurs jours que je bloque complétement pour supprimer une ligne d'un tableau qui est crée "dynamiquement" ..
Je m'éxplique..
Il y a du JS et du PHP..
En gros un utilisateur arrive sur la page et peut rentrer son nom, le titre de son lien et l'url du lien
quand il appuis sur "ajouter" le code javascript rentre en action et envoie la requête suivante :
// Fonction permettant d'envoyer le lien au serveur
function envoyerLien(lien){
ajaxPost("http://franknangy.com/liens/liens/post_json.php", lien, function(reponse) {
update();
},
true);
}
// Fonction permettant d'afficher le dernier lien envoyé sur le serveur
function afficherLiens(nLink){
ajaxGet(nLink, function (reponse) {
var liens = JSON.parse(reponse);
liens.forEach(function (lien) {
var newLink = creerElementLien(lien);
contenuElt.prepend(newLink, contenuElt.firstChild)
});
});
}
// Met à jour les deux tableau de liens
function update (){
//on vide
contenu.innerHTML = "";
//On remet à jour
listeLiens.forEach(function (lien) {
var elementLien = creerElementLien(lien);
contenu.appendChild(elementLien);
});
afficherLiens(nLink);
}
Le HTML est crée aussi à partir de JS
Le fichier post_json.php ressemble à ça :
<?php
// Converti la valeur reçue en array php
$dataLink = json_decode(file_get_contents('newLink.json'), true);
if (is_null($dataLink)){
$dataLink = [];
}
// Récupère données utilisateur
$dataRaw = file_get_contents('php://input');
// Transforme les données en objet php
$data = json_decode($dataRaw);
//on va tester si la variable $data est un tableau
if(is_array($data)){
//Si c'est un tableau on va utiliser array_merge pour fusionner les deux tableaux
array_merge($dataLink,$data);
}else{
//$data n'est pas un tableau, mais un objet php correspondant à l'objet JSON, on l'ajoute comme nouvelle ligne dans le tableau.
array_push($dataLink, $data);
}
$encodedDataLink = json_encode($dataLink, true);
file_put_contents("newLink.json", $encodedDataLink);
Et ce que j'aimerais et que je n'arrive pas du tout à faire, c'est que l'utilisateur puisse supprimer une des lignes qu'il a crée, donc déjà, sur chaque nouveau lien crée il y a un bouton "supprimer" qui est disponible, il faudrait que j'arrive a selectionner le bon index, supprimer la ligne corréspondante, réindexer le tableau, mettre à jour le tableau...
Je pense qu'il faut sûrement une boucle pour parcourir le tableau suivi d'un "unset" mais je n'ai pas du tout la logique derrière....
Si quelqu'un peut m'aider s'il vous plait ? (vous pouvez voir l'exemple en direct à l'adresse suivante : http://franknangy.com/liens/html/liensweb.html j'avais déjà tenté de creer un bouton pour supprimer toutes les entrées d'un coup juste avec JS mais ça n'a pas marché non plus...)
Merci pour ta réponse, mais je ne vois pas comment l'index sera lu dans le php, il me faut sûrement une boucle aussi de ce côté là ? Et à quel moment dans ma boucle forEach j'utilise le parametre de l'index pour le connaitre ? Désolé mais je suis encore débutant donc il me faut quelques pistes supplémentaires
Ca dépend comment tu souhaites déclencher la suppression.....
Si sur chaque ligne tu as un bouton de suppression.... il faut, lors de l'appui sur ce bouton lui envoyer ces "id"
C'est bien ça le problème, comment récupérer ces "id" d'abord ? sachant qu'un lien est crée de la sorte :
function creerElementLien(lien) {
var titreElt = document.createElement("a");
titreElt.href = lien.url;
titreElt.style.color = "#428bca";
titreElt.style.textDecoration = "none";
titreElt.style.marginRight = "5px";
titreElt.appendChild(document.createTextNode(lien.titre));
var urlElt = document.createElement("span");
urlElt.appendChild(document.createTextNode(lien.url));
// Cette ligne contient le titre et l'URL du lien
var ligneTitreElt = document.createElement("h4");
ligneTitreElt.style.margin = "0px";
ligneTitreElt.appendChild(titreElt);
ligneTitreElt.appendChild(urlElt);
// Cette ligne contient l'auteur
var ligneDetailsElt = document.createElement("span");
ligneDetailsElt.appendChild(document.createTextNode("Ajouté par " + lien.auteur));
// Bouton de suppression
var btnElt = document.createElement("button");
btnElt.appendChild(document.createTextNode("Supprimer le lien"));
btnElt.style.marginLeft = "270px";
var divLienElt = document.createElement("div");
divLienElt.classList.add("lien");
divLienElt.appendChild(ligneTitreElt);
divLienElt.appendChild(ligneDetailsElt);
divLienElt.appendChild(btnElt);
return divLienElt;
}
Si sur chaque ligne tu as un bouton de suppression.... il faut, lors de l'appui sur ce bouton lui envoyer ces "id"