Discussion :

[kerlede]

Bonjour à toutes et à tous,

depuis pas mal de temps je fouille le web a la recherche d'une solution à mon problème et après pas mal de test je vous soumet mon souci car, vous vous en doutez bien, je n'ai pas trouver de solution. Pour information je débute en javascript et ai tendance a chercher l'équivalent de PHP, langage que je commence a bien connaître, en javascript et cela peut être à tord.

le décor :

J'ai une page dans la quelle je sort des informations d'une bdd avec une boucle while sous forme de tableau en PHP. dans chaque ligne de ce tableau j'ai un bouton qui me permet de modifier les données unique liée a la ligne. Le bouton m'envoie dans une autre partie de cette même page, dans une <div hidden>, qui n’apparaît que quand elle est sollicité par le bouton. J’espère être assez clair

le code du bouton le voici :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<button id="blocuse'.$usi.'" class="btn btn-info btn-sm" data-toggle="modal" data-target="#deluse-modal" data-use="'.$data_use['id_user'].'" data-npuse="'.ucfirst($data_use['prenom']).'&nbsp;'.strtoupper($data_use['nom']).'">Bloquer</button>';

grasse aux données transmise dans data j'envoie les informations dans la <div> correspondante. Mon souci est que je n'arrive pas à déterminer le bon ID dans ma récupération des données. Mon code qui ne fonctionne que si je force l'ID :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
echo '<script>
var blocusers = document.getElementById("blocuse2");
var use = blocusers.dataset.use;
var npuse = blocusers.dataset.npuse;
</script>';
<script>document.write(npuse)</script>

Ma demande est comment puis je récupérer le bon ID, j'ai testé avec les boucle while est for avec un if mais sans succès

En vous remerciant toutes et tous par avance.

[sekaijin]

Lorsque je vois

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write

j'ai envie de dire mets tout à la poubelle et lit les tuto et la FAQ
ensuite dans le bouton où est l'action ?

et pour finir
sur le forum JS on ne poste pas de PHP
tu ouvres ta page, tu vas dans le menu outil et tu fais "Afficher la source"
tu verras là le code source HTML créé par ton php

il n'y a que lui qui est utilisé par javascript le code les variables et tout le reste du php est inconnu du navigateur.

là le post est trop obscur pour tenter une interprétation.
A+JYT

[Watilin]

J'ai envie de rajouter : la console te sauvera la vie.

Apparemment ce document.write – qui, tu l'auras compris, est honteux (ne le prends pas mal) – te sert à déboguer ton script.
La console fait la même chose, mais de façon beaucoup plus confortable. Tu l'ouvres avec F12 ; dans ton code, tu remplaces tous les document.write et aussi les alert de débogage, par console.log. Les informations s'afficheront dans la console sans perturber le déroulement de ton script ni risquer d'écraser le contenu de la page.

Pour ton problème d'id : il y a différentes façons de lier une fonction aux clics qui se produisent sur ton bouton. Voir par exemple addEventListener. Dans tous les cas, tu as accès au bouton depuis l'intérieur de cette fonction (avec this ou event.target), et donc à plus forte raison tu as accès à l'id du bouton.

Conseil important : ne génère pas ton JS quand tu peux éviter. Quand ta page peut fonctionner sans données venant du serveur (et c'est ton cas), écris du code JS statique (c'est-à-dire pas généré par PHP). De préférence dans un fichier externe comme ça il peut être mis en cache.
Quand tu mélanges du code PHP et JS dans le même fichier, ça a tendance à mélanger aussi les neurones, et à la longue ça produit des effets secondaires tels que : épuisement, maux de tête et calvitie précoce.

[kerlede]

Bonjour à toutes et à tous,

et merci de vous intéresser à mon problème

sekaijin

je pose rarement des questions sur ce forum, c'est même la première fois, cars j'ai tendance à toujours essayer de trouver par moi même. Je suis donc ici pour avoir des critiques et retours constructif, donc me dire qu'en voyant document.write je doit tout mettre à la poubelle sans autre forme d'explication ne me parait pas très constructif.

Sur ce, je vous transmet quelques informations complémentaire car j'ai du mal m’expliquer et je vous pris de m'en excuser.

ce :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write

me permet uniquement d'afficher les données récupérer et non a déboguer mon script.

ensuite dans le bouton où est l'action ?

L'action de ?

le bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id="blocuse2" class="btn btn-info btn-sm" data-toggle="modal" data-target="#deluse-modal" data-use="'XXXXXXXXX'" data-npuse="toto">Bloquer</button>

J'ai enlevé les balises PHP , me permet d'afficher un bloc <div> grace à data-toggle="modal" et data-target="#deluse-modal". Ma div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="modal fade" id="deluse-modal" tabindex="-1" role="dialog" aria-hidden="true"></div>

Mon souci est que j'ai un bouton par ligne de tableau et chaque button id= est incrémenté automatique de 1, blocuse1, blocuse2, blocuse3 etc... Pour récupérer les données envoyé par le button data-use= data-npuse= j'ai en début de <div> fait ce code (pour le moment cela restera sur la même page et quand ça fonctionnera le script seras externalisé) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script>
var blocusers = document.getElementById("blocuse2");
var use = blocusers.dataset.use;
var npuse = blocusers.dataset.npuse;
</script>

Cela fonctionne très bien à ceci prés, c'est que bien évidement seul les données avec l'id mis en dure sont récupéré. Je cherche donc a savoir comment puis je récupérer le bon ID, envoyé par button pour l'inclure dans mon getElementById. Comme tu me le recommande Watilin je vais gratter du côté addEventListener ou this ou event.target.

Je suis plus kinesthésique que visuel ou auditif en mode d'apprentissage, donc si vous avez quelque petit bout de code je suis preneur.

En vous remerciant toutes est tous.

A bientôt.

[sekaijin]

pour le document.write la réponse de Watilin t'apporteras des réponse.

Mon propos est simplement que généralement la présence de document.write est synonyme de programmation dégueulasse. et que donc j'ai tendance lorsque je le vois à dire mets tout à la poubelle et fais un programme propre.
Je te conseille de lire la FAQ à ce sujet.

pour ce qui est du PHP
on ne te demande pas de retirer ton code PHP

ce qu'il te faut comprendre c'est que PHP produit un code HTML et Javascript
et que c'est ce code là qui s'exécute dans le navigateur.

tu vas donc dans ton navigateur et tu fais "Afficher la source" tu auras là le code HTML et Javascript qu'exécute ton navigateur et non ce que tu pense qu'il exécute.

c'est ce code là et lui seul qui permets de savoir ce qui cloche.

tu nous poste un php qui est censé produire un HTML et tu dis avoir un pb d'ID multiple
mais on ne vois pas ce HTML avec les ID multiples. on ne sais donc pas de quoi tu parles. on ne peut même pas supposer quoi que ce soit.


Je te conseille donc comme le propose Watilin de remplacer tous les appels à document.write et echo pour le debug par console.log

tu ouvre ton navigateur et tu fais F12
tu ouvre ton URL et tu fais "Afficher la source"

tu auras ainsi tout ce qu'il faut pour analyser le problème et nous poster les éléments nous permettant de t'aider.



Quant à ma question sur l'action.
normalement lorsqu'on mets un bouton c'est pour déclencher une action lorsque l'utilisateur clique dessus.

dans ce que tu postes je vois du HTML du JS mais je ne vois pas quel code JS est exécuté quand on clique dessus le bouton. Je ne vois pas non plus de quelle façon tu relie ton code JS à ton HTML

Pour comprendre ton code il nous faudrait savoir comment tu gère l'événement click sur le bouton,
comment tu appelle le javascript qui est censé s'exécuter quand on clique.

A+JYT

[kerlede]

Je joint ci dessous le résultat de mon script qui exécuté dans le navigateur :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<table class="table table-mailbox">
<tbody>
<tr class="unread">
<td >1</td>
<td>
<i class="fa fa-male"></i>
</td>
<td>toto</td>
<td>xxx@xxx.fr</td>
<td>uuuu</td>
<td>unedate</td>
<td>
<span class="label label-success">Validé</span>
</td>
<td>
<div class="btn-group">
<button id="blocuse1" class="btn btn-info btn-sm" data-npuse="toto" data-use="identifiandetoto" data-target="#deluse-modal" data-toggle="modal">Bloquer</button>
<button class="btn btn-info btn-sm">Modifier</button>
</div>
</td>
</tr>
<tr class="unread">
<td>2</td>
<td>
<i class="fa fa-female"></i>
</td>
<td>tutu</td>
<td>zzzz@zzzz.fr</td>
<td>lllllllllllll</td>
<td>une-date</td>
<td>
<span class="label label-success">Validé</span>
</td>
<td style="text-align: center;">
<div class="btn-group">
<button id="blocuse2" class="btn btn-info btn-sm" data-npuse="tutu" data-use="identifiandetutu" data-target="#deluse-modal" data-toggle="modal">Bloquer</button>
<button class="btn btn-info btn-sm">Modifier</button>
</div>
</td>
</tr>
</tbody>
</table>

en cliquant sur <button> la fonction data-target="#deluse-modal" de ce dernier me permet d'afficher la <div> qui porte l'id du data-target soi ici deluse-modal la fonction data dans <button> me permet de transporter des informations exemple data-npuse="tutu" data-use="identifiandetutu". C'est information je souhaite les récupérer dans la <div> c'est à dire dans :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="modal fade" id="deluse-modal" tabindex="-1" role="dialog" aria-hidden="true"></div>

Pourquoi je parle d'id multiple, tout simplement parce que chaque <button> généré dans mon tableau possède un ID différent, et en fonction de celui sur le quel je clic je souhaite récupérer les données transporter par celui ci dans ma <div> pour traitement ultérieur, cette <div> joue un peut le role d'un alerte

Encore merci sekaijin pour ton aide et en espérant avoir été plus claire.

à Bientôt.

[kaari kosaku]

Tu n'aurais pas oublié de nous dire que tu utilise un framework ?

Genre, à tout hasard, twitter bootstrap ?