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

jQuery Discussion :

Récup un id de type id="monId_'.$id.'" en JS / JQuery


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Homme Profil pro
    Les plantes et l'informatique
    Inscrit en
    Juillet 2017
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Les plantes et l'informatique

    Informations forums :
    Inscription : Juillet 2017
    Messages : 26
    Points : 15
    Points
    15
    Par défaut Récup un id de type id="monId_'.$id.'" en JS / JQuery
    Bonjour !

    Je bloque depuis un moment sur un problème qui j'en suis sur est tout bête. Mais quand ça ne veut pas, ça ne veut pas...

    Je code actuellement un panier pour mon site internet (je débute). Dans ce panier, j'ai les éléments que l'utilisateur a ajouté lors de sa navigation sur le site. Pour chaque élément, j'ai un input type number, avec une class/id du type : id="maVariable_$idProduit". Pour afficher tout cela, j'utilise une boucle while, après avoir récupérer les données souhaitées depuis ma BDD (j'utilise une BDD au lieu d'un cookie ou du cache navigateur pour le moment).

    Pour plus de clarté, prenons l'exemple ci-dessous :

    Rendu visuel :
    Nom : caddyForum.png
Affichages : 115
Taille : 22,7 Ko

    Code HTML / PHP :
    Code PHP : 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
    while ($produit = $item->fetch())
    {
        $total = $produit['prix']*$caddyItems['quantite'];
     
        echo'
        <tr>
            <td>X</td>                                                          
            <td>'.$produit['name'].'</td>                                                    
            <td><input type="number" name="quantite" class="modifQ_'.$produit['id'].' quantite" id="quantite'.$produit['id'].'" value="'.$caddyItems['quantite'].'">
                <br>
                <input type="submit" name="modifier" class="modifQ_'.$produit['id'].' modifier" id="modifier_'.$produit['id'].'" value="Modifier">
            </td>                                                           
            <td>'.$produit['prix'].'</td>                        
            <td>'.$total.'</td>
        </tr>';
    }

    Donc, ce que j'aimerai, c'est que lorsque l'utilisateur, après avoir inscrit une nouvelle quantité dans l'input number "modifQ_$idProduit", clique sur l'input submit "modifier_$idProduit", que JS récupère le bouton sur lequel on a cliqué (jusque là, pas de soucis) et me récupère la value="'.$caddyItems['quantite'].'" de l'input number correspondant à ce bouton (donc le produit concerné).

    Code JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $(document).ready( function () 
    {
        $('.modifier').on('click', function() 
        {
            var idItem = $(this).attr('class');
            var newQuantity = $('.quantite').attr('value');
     
            console.log(idItem); // affiche bien "modifQ_$idProduit"
            console.log(newQuantity); // affiche 5 (soit la value du premier input)
        });
    });
    Évidemment cela ne fonctionne que sur le premier input number étant donné que la class "quantite" n'est pas incrémentée, il prend la première qui vient. Donc peu importe sur quel bouton je clic, on affichera toujours 5. Mon problème est donc de réussir à faire le lien entre chaque bouton et chaque input number associé en appelant une classe incrémentée (ou autres solutions !).
    Je ne trouve pas de solution. C'est pourtant tout bête, j'en suis convaincu...

    J'espère avoir été clair.
    Si quelqu'un sait m'aider, je suis preneur.
    Je vous remercie d'avance pour votre temps !
    Passez une bonne soirée

    Cordialement,
    Xerkes.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 275
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 275
    Points : 15 591
    Points
    15 591
    Par défaut
    comme vous l'avez compris le sélecteur ".quantite" va retourner toutes les balises ayant cette classe.
    donc si vous voulez le nombre dans la balise à côté du bouton, une possibilité est de commencer par chercher la balises "td" parente du bouton. et ensuite la 2e étape est chercher la balise ".quantite" qui est dans cette balise td.
    la 1re étape peut être faite avec la méthode closest
    https://developer.mozilla.org/fr/doc...lement/closest
    et ensuite la 2e étape avec getElementsByClassName :
    https://developer.mozilla.org/fr/doc...ntsByClassName

    je vous ai proposé du code qui n'utilise plus jquery puisque cette bibliothèque n'apporte plus grand chose par rapport à du code javascript direct.
    je vous conseille aussi de mettre des classes css aux différents balises td si vous avez prévu de les utiliser dans la suite du code.

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 672
    Points
    66 672
    Billets dans le blog
    1
    Par défaut
    Avec JQuery tu peux utiliser le selecteur id^= qui signifie "id commence par"
    Qui retournera alors la collection des éléments dont l'id commence par "monId"

    Ou pour un element en particulier

    NrId étant une variable ...
    Qui retournera alors seulement l'élément dont l'id est minId_[nr]
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre à l'essai
    Homme Profil pro
    Les plantes et l'informatique
    Inscrit en
    Juillet 2017
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Les plantes et l'informatique

    Informations forums :
    Inscription : Juillet 2017
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    Bonjour à vous

    Un gros merci pour l'aide apportée.
    Grâce à vos conseils j'ai pu trouver une solution qui fonctionne parfaitement.

    J'ai gardé le JQuery car j'avoue ne pas bien faire la différence entre le JS 2023 et le JQuery. Dans mes souvenirs (lointains) JS me fait très peur... Je revois des centaines de lignes de codes incompréhensibles pour le moindre besoin. J'en ai une peur bleu :p

    Bref ! Voici la solution que j'ai trouvé :

    Code JQuery :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // Modifier la quantité d'un item dans le caddy
    $(document).ready( function () 
    {
        $('.modifier').on('click', function() { // Au clic sur un élément
            var idItem = $(this).attr('class'); // on récupère la class de cet élément
            var parent = $(this).closest('td'); // on récupère l'élément parent td de cet élément
            var newQuantity = $(parent).find('.quantite').attr('value'); // on récupère la value de l'enfant avec la classe .quantite de ce parent
     
            console.log(idItem); // Affiche bien la class de l'élément cliqué
            console.log(parent); // Affiche bien le TD parent de l'élément cliqué
            console.log(newQuantity); // Affiche bien la value de l'enfant avec la class .quantite du parent ci-dessus
        });
    });

    Pourriez-vous me confirmer que cette méthode est W3C valide (histoire de ne pas apprendre du vent) ?
    J'attends confirmation avant de passer le post en résolu

    Merci encore à vous deux !

    Cordialement,
    Xerkes.

  5. #5
    Membre éclairé
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    330
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 330
    Points : 670
    Points
    670
    Par défaut
    Tu ne devrais pas avoir peur de JS, le JavaScript moderne ressemble beaucoup à jQuery.
    Tu peux voir les différences entre JS et jQuery sur le site https://youmightnotneedjquery.com/

    Ta solution est fonctionnelle mais elle est dépendante de la structure html : si tu modifies ta structure html et/ou que tu remplaces les balises td par d'autres balises, ton script js ne fonctionnera plus.
    Pour cette raison, je préfère la solution proposée par SpaceFrog.
    L'utilisation des attributs personnalisés data-* pourrait aussi de permettre de cibler plus facilement les éléments dans ton script.
    Au passage, préfère l'utilisation d'un input type="button" à la place d'un input type="submit" si tu n'as pas de formulaire.
    Pour exemple : https://jsfiddle.net/L1v9368t/

  6. #6
    Membre à l'essai
    Homme Profil pro
    Les plantes et l'informatique
    Inscrit en
    Juillet 2017
    Messages
    26
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Les plantes et l'informatique

    Informations forums :
    Inscription : Juillet 2017
    Messages : 26
    Points : 15
    Points
    15
    Par défaut
    Citation Envoyé par Pytet Voir le message
    Tu peux voir les différences entre JS et jQuery sur le site https://youmightnotneedjquery.com/
    Incroyable ce site. On devrait l'épingler dans tous les forums JQuery / JS en vrai. J'avais déjà fait des recherches pour voir les nouvelles différences mais aucun sites n'étaient aussi clair et concis.


    Citation Envoyé par Pytet Voir le message
    Au passage, préfère l'utilisation d'un input type="button" à la place d'un input type="submit" si tu n'as pas de formulaire.
    Je prends note, je ne savais pas.


    Citation Envoyé par Pytet Voir le message
    Pour cette raison, je préfère la solution proposée par SpaceFrog.
    L'utilisation des attributs personnalisés data-* pourrait aussi de permettre de cibler plus facilement les éléments dans ton script.
    Pour tout dire, je ne comprends pas trop le fonctionnement des data-*
    Je constate que ça fonctionne, mais je ne saurais l'expliquer clairement.
    Je vais voir pour trouver une doc correcte.


    EDIT
    Ce que je ne comprends pas dans ton code Pytet, c'est ce passage :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    button.addEventListener('click', (e) => {
        const inputQuantite = document.querySelector('input[id="quantite' + e.target.dataset.id + '"]')

    Je comprends comme cela :
    1- On écoute l'événement click sur un bouton (modifier dans mon cas).
    2- (e) => : je ne comprends pas ce (e)
    3- La nouvelle quantité inscrite par l'utilisateur est stockée dans inputQuantite via une sélection de l'input ayant pour ID : quantite + e (toujours ce (e) que je ne comprends pas).

    Du coup j'ai fait ceci (fonctionnel 100%) :
    Code JS : 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
    $(document).ready( function()
    {
        $('.modifier').on('click', function() {
     
            const idItem = $(this).attr('id');
            var recupId = document.getElementById(idItem); 
     
            const inputQuantite = document.querySelector('input[id="quantite_' + recupId.dataset.id + '"]')
     
            if (inputQuantite) {
              let quantite = inputQuantite.value;
              console.log(quantite);
            }
     
        });
    });

    J'ai bien conscience que ça doit être super moche pour des pro, mais ça fonctionne encore mieux que mon ancien code qui lui ne prenait pas en compte la modification par l'utilisateur de mon input number.
    Je vais garder ça, et finir ma fonction.


    Merci !

    Cordialement,
    Xerkes.

  7. #7
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 275
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 275
    Points : 15 591
    Points
    15 591
    Par défaut
    la notation avec la flèche est un raccourci pour les déclarations de fonctions.
    par exemple les 3 fonction suivantes sont (presque) équivalentes

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function (evenement) {
    	// ici du code
    }
     
    (evenement) => {
    	// ici du code
    }
     
    evenement => {
    	// ici du code
    }


    les accolades peuvent aussi être retirées s'il y a une seule ligne et cela équivaut à "return" comme cela :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function (evenement) {
    	return evenement["attribut"];
    }
     
    evenement => evenement["attribut"]

    il y a une différence entre les 2 notations par rapport à certaines variables spéciales comme "this". vous pouvez trouver plus de détails là :
    https://developer.mozilla.org/fr/doc...rrow_functions

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 030
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 030
    Points : 44 375
    Points
    44 375
    Par défaut jQuery vs JS vanilla n'est pas la question
    Bonjour,
    J'ai bien conscience que ça doit être super moche pour des pro, ...
    Il n'est pas de savoir si le code est « moche » mais si il est cohérent !

    Le mélange des deux n'est pas forcément, voire jamais, ce que l'on fait de mieux au niveau de la cohérence, on utilise soit l'un soit l'autre, mais d'abord quelques remarques

    Ceci étant la logique, ou la compréhension de ce que l'on fait, n'est pas non plus à négliger.

    Reprenons ces deux lignes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    const idItem = $(this).attr('id');                  //(1)
    var recupId = document.getElementById(idItem);      //(2)
    (1) tu récupères l'ID de l'élément venant d'être cliqué
    (2) tu récupères l'élément qui a pour iD idItem

    ... n'as-tu pas l'impression que c'est le même !!!!

    Désolé, mais je ne pouvais pas laisser cela passer

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Alias avec différents types de quote ?
    Par Djobird dans le forum Administration système
    Réponses: 2
    Dernier message: 14/02/2011, 17h37
  2. UPDATE en ajoutant un 0 sur un champ de type "char"
    Par doum2 dans le forum Requêtes
    Réponses: 1
    Dernier message: 08/03/2006, 14h22

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