IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Récupérer un getElementById multiple


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Responsable de compte
    Inscrit en
    Décembre 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Responsable de compte
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Décembre 2013
    Messages : 3
    Par défaut Récupérer un getElementById multiple
    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.

  2. #2
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    Lorsque je vois
    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

  3. #3
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    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.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  4. #4
    Candidat au Club
    Homme Profil pro
    Responsable de compte
    Inscrit en
    Décembre 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Responsable de compte
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Décembre 2013
    Messages : 3
    Par défaut
    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 :

    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.

  5. #5
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    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

  6. #6
    Candidat au Club
    Homme Profil pro
    Responsable de compte
    Inscrit en
    Décembre 2013
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Responsable de compte
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Décembre 2013
    Messages : 3
    Par défaut
    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.

  7. #7
    Membre éprouvé
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 125
    Par défaut
    Tu n'aurais pas oublié de nous dire que tu utilise un framework ?

    Genre, à tout hasard, twitter bootstrap ?

Discussions similaires

  1. récupérer valeurs liste multiple
    Par Fench dans le forum Servlets/JSP
    Réponses: 3
    Dernier message: 03/12/2008, 17h39
  2. récupérer les valeurs multiple d'un select
    Par tinmarbusir dans le forum Langage
    Réponses: 3
    Dernier message: 09/01/2008, 17h54
  3. Récupérer des valeurs multiples dans un DBGrid
    Par Antjac dans le forum Bases de données
    Réponses: 7
    Dernier message: 17/12/2007, 20h44
  4. Réponses: 4
    Dernier message: 29/03/2007, 10h10
  5. Récupérer un select multiple
    Par tobbie1 dans le forum XMLRAD
    Réponses: 5
    Dernier message: 18/12/2006, 22h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo