Récupérer dynamiquement l'id en JS depuis un foreach PHP
Bonjour,
Je rencontre un problème tout bête qui me tient depuis un moment.
Mon projet pour faire simple : Imaginez que j'ai une table 'personne' qui contient plusieurs entrées avec un prénom et un nom.
Je génère dynamiquement leur fiche via un foreach() en PHP qui me retourne toutes les occurences, par exemple :
id= 1
Prénom= Pierre
Nom= Dupont
id= 2
Prénom = Jean
Nom = Bon
Etc...
Côté client, J'ai un bouton "éditer" pour chaque fiche.
Lorsque je clique sur le bouton "éditer", j'affiche un formulaire d'édition via Jquery en retirant l'attribut "hidden".
Pour avoir le formulaire spécifique pour chaque fiche, je voudrais donc passer quelque chose comme ça :
<div id=edit-form-<?= $id ?>>
<form>
<input>
</form>
</div>Mon problème : Comment récupérer dynamiquement le "<?= $id ?>" en JS qui va me retourner "1" pour Pierre, puis "2" pour jean etc... afin de bien avoir le bon formulaire d'édition en fonction de l'id ?
Il faut comprendre que j'ai créé un système de "cartes", affichées dans un listing les unes sous les autres :
1) Pierre
2) Jean
3) etc...
Il faut donc que l'input apparaisse uniquement sur la bonne carte.
Pour le moment, j'y parvient mais seulement sur la première carte en bidouillant un truc pas bien joli...
- Je récupère via un input hiden l'id, mais du coup cela ne fonctionne que pour le premier
let id = document.getElementById('hidden_id').value;- Puis je peux faire mon traitement
$( "#edit-link-name-"+id ).on( "click", function(){
// Traitement
});Pour résumer simplement :
Je souhaite récupérer la variable "$id" dynamiquement pour chaque entrée et ce en JS depuis mon foreach()
<div id=edit-form-<?= $id ?>>J'espère avoir réussi à me faire comprendre, sinon j'essayerai d'expliquer différement.
Merci !
7 réponses
Salut l'ami je pense que tu peux passer par un "dataset" je m'explique :
<div data-id=<?= $id ?>></div>
pour récup cette valeur en js :
console.log(element.dataset.id);
et voila dis moi si j'ai bien compris et au plaisir ;)
var i = 10; // par exemple
var id = document.getElementById('edit-link-name-'+i); J'ai pas bien compris mais ça devrait retourner la bonne div comme ça, c'est ça que tu cherches à faire ? Parce que si tu cherches à récupérer la liste des personnes il vaut mieux passer par un tableau json
@Jules Liegeois Merci pour ta réponse, c'est ça que je cherche, j'arrive bien à récupérer l'id comme cela, mais étant donné que le nom de l'id reste toujours le même et qu'un id est unique par définiton, je ne peux qu'éditer le premier de la boucle du foreach(), il faudrait que ce soit l'id qui soit dynamique, mais ça revient à mon problème initial :(
@thefailtheory C'est pas tout à fait ça, en fait il faudrait que sur ton exemple
var id = document.getElementById('edit-link-name-'+i); Je puisse récupérer dynamiquement l'id du profil provenant de ma loop foreach() et que par conséquent le "+i" de "edit-link-name" renvoie automatiquement "1" pour la première entrée, "2" pour la deuxième, etc...
Merci à toi
Hello,
Pourquoi dans ton foreach qui te permet de créer le formulaire avec le bouton d'action tu n'ajoute pas un "onclick" qui modifie le css à la volé du genre :
<button onclik="$('#edit-link-name-'+i).show()">Éditer ma fiche</button>
J'ai peut-être mal compris ton problème ? :)
Hello !
Merci pour ta réponse, en fait pour faire simple :
Il faut que j'arrive à récupérer l'id de la div dynamiquement et en entier avec la variable "$id" dans mon fichier JS. C'est ça que je n'arrive pas à faire :)
<div id="ma-div-<?= $id ?>"
// Comment récupérer le $id dynamiquement en JS
$("#ma-div-"+var_que_je_souhaite_récupérer_dynamiquement").on( "click", function() {
});Je suis sûr que c'est tout bête en plus comme problème, je dois mal m'y prendre !
Malheureusement tu essaye de récupérer une valeur $id qui est du PHP dans ton javascript ce qui n'est pas possible !
Par contre tu peux utiliser un selecteur jQuery qui te permet justement de récupérer toutes les div qui ont un id qui commence par "ma-div-" ce qui te permet peut importe la valeur de $id d'exécuter la fonction que tu souhaites !
Le selecteur en question est celui-ci :
$("[id^=ma-div-]")Ce selecteur te permet de récupérer tous les éléments du DOM qui ont tous un id qui comment par "ma-div-"
Une fois dans ta fonction, en JS tu peux récupérer la valeur exacte de l'id genre "ma-div-1" et faire un split sur les "-" pour récupérer la troisième case de ton tableau qui sera la valeur de $id
Dit moi si ça t'a aidé ?