Discussion :

[Derko]

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.

[mathieu]

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.

[Derko]

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.