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 :

.click sur bouton impossible après utilisation de .load


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 .click sur bouton impossible après utilisation de .load
    Bonsoir,

    il y a peu, j'ai créé le post ci-dessous car je n'arrivais pas à récupérer un id du type id="monID_$mavariable[id]".
    https://www.developpez.net/forums/d2...-id-js-jquery/

    Grace aux 2 personnes qui m'ont aidé, j'ai réussi à obtenir un code 100% fonctionnel :

    1°) CODE HTML / PHP (index) :
    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
    17
    while ($produit = $item->fetch())
    {
        $total = $produit['prix']*$caddyItems['quantite'];                                         
     
        echo'
        <tr>
            <td>X</td>
            <td class="img-table"><img src="assets/img/shop/produit_'.$produit['id'].'/photoFleur_1.jpg" alt="'.$produit['name'].'" title="'.$produit['name'].'"></td>
            <td>'.$produit['name'].'</td>
            <td class="test">
                <input type="number" name="quantite" id="quantite_'.$produit['id'].'" class="quantite" value="'.$caddyItems['quantite'].'"><br>
                <input type="button" name="modifier" id="modifier_'.$produit['id'].'" class="modifier" value="Modifier" data-id="'.$produit['id'].'" data-user="'.$_SESSION['idVisiteur'].'">
            </td>
            <td>'.$produit['prix'].'</td>
            <td>'.$total.'</td>                               
        </tr>';
    }

    2°) 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
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    // Récupération et Actualisation des modifications "quantité" du panier
    $(document).ready( function()
    {
        $('.modifier').on('click', function() 
        {   
            // On récupère l'ID du produit sur lequel on désire modifier la quantité          
            const idProduit = $(this).attr('data-id');
            // On récupère l'ID de l'utilisateur qui effectue cette modification
            const idUser = $(this).attr('data-user');
     
            // On récupère l'input number associé au bouton sur lequel on a cliqué pour valider la modification
            const idItem = $(this).attr('id'); 
            var recupId = document.getElementById(idItem);
            const inputQuantite = document.querySelector('input[id="quantite_' + recupId.dataset.id + '"]')
     
            if (inputQuantite) 
            {
                // On récupère la value de l'input number concerné
                let quantite = inputQuantite.value;
     
                // On UPDATE la BDD avec la nouvelle quantité via une requête AJAX
                $.ajax(
                {
                    type: "POST",
                    data: 'newQuantite='+quantite+'&idP='+idProduit+'&idU='+idUser,
                    url: "./assets/fonctions/modifQuantite.php",
                    // Si succès, on actualise la liste du panier
                    success: $('#caddyList'). load('index.php #caddyList')   
                });
     
                return false;            
            }
        });
    });

    3°) Code PHP (modifQuantite.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
    17
    18
    19
    20
    21
    22
    <?php
        try
        {
            $bdd = new PDO('mysql:host=localhost;dbname=monNom;charset=utf8', 'root', 'root', [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION],);
        }
        catch (Exception $e)
        {
            die('Erreur : ' . $e->getMessage());
        } 
     
        $newQ = $_POST['newQuantite'];
        $idP = $_POST['idP'];
        $idU = $_POST['idU'];
     
        $req = $bdd->prepare('UPDATE caddy SET quantite = :new WHERE idProduit = :idP AND idUser = :idU');
        $req->execute(array(
        'new' => $newQ,
        'idP' => $idP,
        'idU' => $idU));
     
        $req->closeCursor(); 
    ?>

    La récupération des différents ID et de la value de l'input fonctionne superbement bien.

    Le nouveau problème vient de l'ajout de la requête SQL AJAX et le rafraichissement de mon panier.
    En réalité, lorsque j'arrive sur mon site pour la première fois, que j'ajoute des produits dans mon panier, que j'ouvre mon panier et que je modifie une valeur, TOUT fonctionne (bdd updatée et actualisation du panier). Mais par la suite, si je veux modifier une deuxième quantité, plus rien ne fonctionne. Aucune erreur détectée par la console, ou par PHP et mes boutons ne sont plus "cliquables". En gros, ça fonctionne une fois, puis c'est tout. Sauf si j'actualise (F5) toute ma page index. Je ne comprends pas pourquoi.

    Au début je pensais qu'il me fallait mettre tout ce petit code dans une boucle. Mais en fait, pas du tout. Car mon JS est sensé "observer à tout instant" si une action click se déroule sur l'un de mes boutons "Modifier".
    J'ai testé je ne sais combien de solutions venant de divers forums, cours trouvés sur le net. Mais hormis avoir perdu une 15ène d'heures, ça n'a rien changé.
    J'ai déroulé mon code sur papier (SUR PAPIER !) et je n'ai rien remarqué (à mon niveau) qui me paraisse suspect.

    Donc en toute honnêteté, j'en ai marre. A chaque problème réglé y en a un nouveau qui pop. J'en peux plus.

    J'ai vraiment besoin qu'on m'explique ce qui ne va pas dans tout cela.

    Merci d'avance pour les courageux qui auront la patience de me lire et de m'aider.
    Je vais me coucher et je vous souhaite une bonne nuit !

    Cordialement,
    Xerkes.

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

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 287
    Points : 15 603
    Points
    15 603
    Par défaut
    Citation Envoyé par Derko Voir le message
    mon JS est sensé "observer à tout instant" si une action click se déroule sur l'un de mes boutons "Modifier".
    c'est dans le code $('.modifier').on('click', function () ... qu'il ne se passe pas exactement ce à quoi vous vous attendiez.
    le "on" ajoute un écouteur d'évènements aux balises sélectionnées par ".modifier" et donc cela concerne seulement les balises existantes au moment de l'exécution du code.

    une solution pour gérer les balises ajoutées par la suite est de faire de la délégation d'évènement avec le code $(document).on('click', ".modifier", function () {.... avec ça le code sera attaché à "document" qui le plus haut niveau de la page html, c'est le parent de la balise "html".
    et au moment d'un clic n'importe où sur le document, le code sera seulement exécuté si la balise cliquée correspond à ".modifier" ce qui correspond à tous vos boutons.

  3. #3
    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 Mathieu,

    merci beaucoup, ça fonctionne parfaitement.
    Je n'avais pas encore compris les délégations d’événements donc merci pour cette réponse claire et concise. Je vais enfin pouvoir avancer.

    Je vous souhaite une très très bonne journée

    Xerkes.

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

Discussions similaires

  1. [SP-2010] Redirection sur page Web après click sur bouton
    Par brad89 dans le forum SharePoint
    Réponses: 8
    Dernier message: 26/08/2013, 09h42
  2. montrer une image gif après click sur bouton du formulaire
    Par monichou86 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 19/01/2010, 15h31
  3. clear combobox après click sur bouton
    Par mira2008 dans le forum IHM
    Réponses: 2
    Dernier message: 29/01/2008, 12h22
  4. recharger listbox apres click sur bouton
    Par tehes dans le forum ASP.NET
    Réponses: 4
    Dernier message: 22/01/2008, 15h27
  5. Ouvrir nouvelle fenêtre Outlook après click sur bouton
    Par n@n¤u dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 14/06/2006, 17h23

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