Partage
  • Partager sur Facebook
  • Partager sur Twitter

Comment attendre la fin d'un processus js ?

Sujet résolu
    15 septembre 2021 à 18:21:07

    Bonjour, je suis sur un nouveau projet de QRcode pour enregistrer des utilisateurs et à la fin ils doivent être enregistré dans une bdd.

    Mais j'ai un problème car je dois récupérer le svg du QRcode lorsqu'il est fait et faire une requête a un fichier php.

    Le problème est que ma requête passe avant la création du qrcode donc le dom n'est pas le bon et je ne peut pas trouver mon QRcode dufaite.

    Voici mon code:

    <script>
                var mode = "qrcodeScanner"
    
                document.querySelector(".clientList").addEventListener("click", function(e){
                    mode = "clientList"
                    document.querySelector(".scannerQr").src = "contents/scan-barcode-light.png"
                    document.querySelector(".scannerQr").width = "20px"
                    document.querySelector(".clientList").src = "contents/category-bold.png"
                    document.querySelector(".searchIcon").src = "contents/search-normal.png"
                    document.querySelector(".addIcon").src = "contents/add.png"
    
                })
    
                document.querySelector(".searchIcon").addEventListener("click", function(e){
                    mode = "search"
                    document.querySelector(".scannerQr").src = "contents/scan-barcode-light.png"
                    document.querySelector(".scannerQr").width = "20px"
                    document.querySelector(".clientList").src = "contents/category.png"
                    document.querySelector(".searchIcon").src = "contents/search-bold.png"
                    document.querySelector(".addIcon").src = "contents/add.png"
                })
    
                document.querySelector(".addIcon").addEventListener("click", function(e){
                    mode = "addClient"
                    document.querySelector(".scannerQr").src = "contents/scan-barcode-light.png"
                    document.querySelector(".scannerQr").width = "20px"
                    document.querySelector(".clientList").src = "contents/category.png"
                    document.querySelector(".searchIcon").src = "contents/search-normal.png"
                    document.querySelector(".addIcon").src = "contents/add-bold.png"
                })
    
                document.querySelector(".scannerQr").addEventListener("click", function(e){
                    mode = "qrcodeScanner"
                    document.querySelector(".scannerQr").src = "contents/scan-barcode.png"
                    document.querySelector(".scannerQr").width = "20px"
                    document.querySelector(".clientList").src = "contents/category.png"
                    document.querySelector(".searchIcon").src = "contents/search-normal.png"
                    document.querySelector(".addIcon").src = "contents/add.png"
                })
    
                var qrcode = new QRCode(document.querySelector(".qr-code"))
    
                function generateQR(){
    
                    var firstname = document.querySelector(".firstname").value
                    var surname = document.querySelector(".surname").value
                    var mail = document.querySelector(".mail").value
    
                    var info = [firstname,surname,mail]
                    var info = info.join("|")
    
                    /*
                        var encrypted = CryptoJS.enc.Utf8.parse(info);
                        encrypted = CryptoJS.enc.Base64.stringify(encrypted);
    
                        var decrypted = CryptoJS.enc.Base64.parse(encrypted);
                        decrypted = decrypted.toString(CryptoJS.enc.Utf8);
                        decrypted = decrypted.split("|")
                        //alert(decrypted[0], decrypted[1], decrypted[2])
                    */
    
                    var encrypted = info;
                    qrcode.makeCode(encrypted).then(function(){
    
                        var image = document.querySelector(".qr-code > img").src
    
                        var url = window.location.href+"functions.php"
                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", url, false);
                        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                        xhr.send("firstname="+firstname+"&surname="+surname+"&mail="+mail+"&image="+image);
                    
                    });
    
                }
    
            </script>

    Comment je pourrais faire pour que la requête ne passe pas avant le QR ?

    Merci

    • Partager sur Facebook
    • Partager sur Twitter
      16 septembre 2021 à 6:40:58

      Ben, d'après ce que je connais, mettre ta requête dans le .then() ça sert plus ou moins à ça :/
      Cette fonction qrcode.makeCode, elle vient d'un module ?

      • Partager sur Facebook
      • Partager sur Twitter
        16 septembre 2021 à 7:43:16

        LucasWerquin a écrit:

        Ben, d'après ce que je connais, mettre ta requête dans le .then() ça sert plus ou moins à ça :/
        Cette fonction qrcode.makeCode, elle vient d'un module ?


        Oui ça vient d’une librairie mais j’ai déjà essayé le .then mais il n’était pas exécuté
        • Partager sur Facebook
        • Partager sur Twitter
          16 septembre 2021 à 8:11:25

          Alors je pense avoir trouvé le module en question.

          Le souci, c'est que .then() s'utilise avec des promise, qui sont un type bien particulier d'objets. Or ta fonction qrcode.makeCode() ne renvoie pas une promise, donc le .then() ne fonctionne pas. Si je ne me trompe pas ta console de développement devrait te renvoyer une erreur ( qrcode.makeCode.then() is not a function ).

          As-tu tout simplement essayé d'enchaîner les instructions ?

          Autre chose, la ligne 65 me tracasse, ".qr-code > img" n'est pas un sélecteur CSS valide, selon moi. Si tu cherche à récupérer l'image contenue dans l'élément ayant pour classe .qr-code, c'est juste ".qr-code img". Peut-être pour ça que tu n'arrive pas à récupérer ton image dans le DOM.
          Essaye de mettre à la ligne 66 :

          console.log(image);

          Si la console de développement ne t'affiche pas la src de l'image, c'est que tu as une erreur ici.

          • Partager sur Facebook
          • Partager sur Twitter
            16 septembre 2021 à 8:33:08

            LucasWerquin a écrit:

            Alors je pense avoir trouvé le module en question.

            Le souci, c'est que .then() s'utilise avec des promise, qui sont un type bien particulier d'objets. Or ta fonction qrcode.makeCode() ne renvoie pas une promise, donc le .then() ne fonctionne pas. Si je ne me trompe pas ta console de développement devrait te renvoyer une erreur ( qrcode.makeCode.then() is not a function ).

            As-tu tout simplement essayé d'enchaîner les instructions ?

            Autre chose, la ligne 65 me tracasse, ".qr-code > img" n'est pas un sélecteur CSS valide, selon moi. Si tu cherche à récupérer l'image contenue dans l'élément ayant pour classe .qr-code, c'est juste ".qr-code img". Peut-être pour ça que tu n'arrive pas à récupérer ton image dans le DOM.
            Essaye de mettre à la ligne 66 :

            console.log(image);

            Si la console de développement ne t'affiche pas la src de l'image, c'est que tu as une erreur ici.

            j’avais pourtant essayé avec la console de développement et ça fonctionnait.

            mais dans tous les cas il ne peut pas trouver puisque la requête passe avant car dans la console de développement je vois bien dans la partie network l’enchaînement qui n’est pas le bon 

            c’est cette librairie:

            https://github.com/davidshimjs/qrcodejs

            -
            Edité par MaxMlr 16 septembre 2021 à 8:49:21

            • Partager sur Facebook
            • Partager sur Twitter
              16 septembre 2021 à 9:38:20

              Bon, reprenons.

              Tu dis que le .then() n'était pas exécuté. Ce qui, comme je l'ai dit, me paraît cohérent, vu que ta fonction qrcode.makeCode() ne renvoie pas une promise.

              Maintenant, tu me parle de la partie network des outils de développement qui te montre que l'enchaînement n'est pas le bon.

              Je crois qu'il me manque des données pour réfléchir correctement.

              Comment est importé ton module qrcode ?
              Je ne suis pas sûr d'avoir regardé la même bibliothèque que toi, et j'aimerais savoir comment marche cette fonction qrcode.makeCode().
              Si tous les scripts de ce module sont importés dès le chargement de la page, appeler la fonction qrcode.makeCode() ne devrait pas faire intervenir le réseau, ton qrcode étant généré côté client.

              Bref, il faudrait que tu me montre la partie qui importe cette bibliothèque dans ta page. D'autre part, il faudrait que tu me montre comment est déclenchée cette fonction ( probablement un bouton ayant un attribut "onclick" ou sur lequel tu mets un eventListener ).

              [EDIT]

              Des fois je suis un peu long à la détente, mais je viens de penser aussi à une chose. Ce que tu dois récupérer pour l'envoyer dans ta base de données, ce n'est pas l'image en elle-même, déjà techniquement je ne suis pas sûr que ça soit possible, ou alors stocker le contenu binaire d'un fichier image, peut-être...
              Mais ce serait horriblement lourd !
              Pourquoi ne pas stocker les informations permettant de générer le qrcode, tout simplement ? Du coup peu importe l'ordre dans lequel c'est fait, tu peux bien stocker les informations avant de générer le qrcode et l'afficher sur ta page, ce sont deux tâches indépendantes, qui sont réalisées avec les mêmes données, après tout. Et si tu veux afficher sur une page le qrcode généré à partir des données récupérées dans la bdd, c'est plutôt simple aussi ( mais là, il y a bien une histoire d'asynchrone à gérer : quand la requête pour récupérer les données a donné un résultat, générer le qrcode puis l'afficher ).

              -
              Edité par LucasWerquin 16 septembre 2021 à 10:18:05

              • Partager sur Facebook
              • Partager sur Twitter
                16 septembre 2021 à 11:08:21

                LucasWerquin a écrit:

                Bon, reprenons.

                Tu dis que le .then() n'était pas exécuté. Ce qui, comme je l'ai dit, me paraît cohérent, vu que ta fonction qrcode.makeCode() ne renvoie pas une promise.

                Maintenant, tu me parle de la partie network des outils de développement qui te montre que l'enchaînement n'est pas le bon.

                Je crois qu'il me manque des données pour réfléchir correctement.

                Comment est importé ton module qrcode ?
                Je ne suis pas sûr d'avoir regardé la même bibliothèque que toi, et j'aimerais savoir comment marche cette fonction qrcode.makeCode().
                Si tous les scripts de ce module sont importés dès le chargement de la page, appeler la fonction qrcode.makeCode() ne devrait pas faire intervenir le réseau, ton qrcode étant généré côté client.

                Bref, il faudrait que tu me montre la partie qui importe cette bibliothèque dans ta page. D'autre part, il faudrait que tu me montre comment est déclenchée cette fonction ( probablement un bouton ayant un attribut "onclick" ou sur lequel tu mets un eventListener ).

                [EDIT]

                Des fois je suis un peu long à la détente, mais je viens de penser aussi à une chose. Ce que tu dois récupérer pour l'envoyer dans ta base de données, ce n'est pas l'image en elle-même, déjà techniquement je ne suis pas sûr que ça soit possible, ou alors stocker le contenu binaire d'un fichier image, peut-être...
                Mais ce serait horriblement lourd !
                Pourquoi ne pas stocker les informations permettant de générer le qrcode, tout simplement ? Du coup peu importe l'ordre dans lequel c'est fait, tu peux bien stocker les informations avant de générer le qrcode et l'afficher sur ta page, ce sont deux tâches indépendantes, qui sont réalisées avec les mêmes données, après tout. Et si tu veux afficher sur une page le qrcode généré à partir des données récupérées dans la bdd, c'est plutôt simple aussi ( mais là, il y a bien une histoire d'asynchrone à gérer : quand la requête pour récupérer les données a donné un résultat, générer le qrcode puis l'afficher ).

                -
                Edité par LucasWerquin il y a environ 1 heure

                C’est vrai que c’est une bonne idée je n’y avais pas pense 😅

                mais pour ma culture je veux bien la réponse et ducoup le script est importe des le début avec un script src qui appelle une fichier.

                et ducoup pour le network ce qui passe après c’est un data:avec le code de l’image 

                • Partager sur Facebook
                • Partager sur Twitter
                  16 septembre 2021 à 12:00:01

                  "Pour ma culture je veux bien la réponse"

                  => Pour générer le qrcode sur la page du client, tout est assez bien expliqué là :

                  Generate QR Code In Javascript - DEV Community

                  Je dirais que dans ton fichier actuel, il faut virer le .then() qui n'a rien à faire là (supprimer ligne 63 à 73 ).
                  Tu as bien crée ton objet qrcode à la ligne 41, mais tu devrais plutôt utiliser un id plutôt qu'une class. Donc disons que tu as dans ta page HTML une div ayant pour id 'qrCodeContainer', corrige ta ligne 41 :

                  var qrcode = new QRCode('qrCodeContainer');

                  Maintenant, tu peux faire appel à la méthode makeCode() de cet objet à la ligne 63 :

                  qrcode.makeCode(info); //ou encrypted, pour le moment encrypted n'est qu'une référence à info, donc c'est la même chose.

                  Ceci devrait provoquer l'affichage de ton qrcode sur la page, dans la div ayant pour id 'qrCodeContainer'.

                  Ensuite ( ou avant, ça n'a pas réelement d'importance ) tu stockes tout simplement les informations utiles ( fisrtname, surname et mail ) dans ta bdd. Tu réutilises ce que tu as fait ligne 67 à 71, simplement tu n'as pas besoin de transmettre de paramètre image.
                  Dans ta page functions.php, tu insères firstname, surname et mail dans ta base de données.

                  Maintenant, supposons que tu aies besoin de créer le qrcode d'un utilisateur en particulier, par exemple pour le service imprimerie qui va te fabriquer les cartes de parking contenant le qrcode des employés. Ce servie imprimerie aura accès à une page dans laquelle il entre le nom et prénom de l'employé dans un formulaire, quand il soumet le formulaire ça envoie une requête au serveur qui répondra en envoyant toutes les données, de là la page client, quand elle rçoit les données, génère le qrcode et l'affiche sur la page.

                  Je pense que techniquement il ne te manque rien pour faire tout ça ( les ressources pour lire et écrire dans une BDD et celles pour faire des XMLHttpRequest sont légions, je ne saurais pas t'apporter quelque chose de plus clair ). Je crois que là où tu as un souci, c'est avec la logique de ton site. Et des fois, les outils qui peuvent vraiment t'aider sont...
                  ... du papier, un crayon et un peu de calme. Je ne me moque pas de toi, ça m'a surpis aussi quand j'ai vu un apprenti programmeur passer plus de temps sur son cahier de brouillon que sur son PC. Et j'ai testé la méthode, ça marche. Bien réfléchier à ce qu'on veut faire, le traduire en une série d'instructions simples et efficaces. Une fois que tout ça est clair dans ta tête, quand on a un bon éditeur de code qui fait de l'auto complétion, ça passe tout seul ( enfin, la plupart du temps ).



                  • Partager sur Facebook
                  • Partager sur Twitter
                    16 septembre 2021 à 12:08:55

                    Je vois 

                    merci pour tout 

                    • Partager sur Facebook
                    • Partager sur Twitter
                      16 septembre 2021 à 12:35:45

                      Mais de rien. Bonne continuation ;)
                      • Partager sur Facebook
                      • Partager sur Twitter

                      Comment attendre la fin d'un processus js ?

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      • Editeur
                      • Markdown