Script AJAX qui ne s’exécute qu'une seul fois.
Résolu/Fermé
Val_3990
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
-
3 juin 2020 à 11:19
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020 - 5 juin 2020 à 10:51
Val_3990 Messages postés 21 Date d'inscription vendredi 22 mai 2020 Statut Membre Dernière intervention 15 juin 2020 - 5 juin 2020 à 10:51
A voir également:
- Script AJAX qui ne s’exécute qu'une seul fois.
- Script vidéo youtube - Guide
- Qu'est ce qu'une femme fait 3 fois par jour et un homme une fois dans sa vie ✓ - Forum Loisirs / Divertissements
- Je suis une chose que les garçons utilisent deux fois par jour et les filles une fois toute leur vie - Forum Loisirs / Divertissements
- Sirène pompiers 5 fois signification ✓ - Forum Loisirs / Divertissements
8 réponses
jordane45
Messages postés
38314
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2024
4 705
3 juin 2020 à 14:36
3 juin 2020 à 14:36
Bonjour,
Dans ton cas, tu retournes le code html de ta page... et donc, l'event n'est pas réinitialisé sur le "bouton"...
A savoir qu'en Ajax on évite de retourner du HTML ....
On ne retourne que les données "brute" ( au format JSON de préférence), et ensuite, c'est le javascript qui s'occupe de créer le html avec ces données....
Voici quelques exemples : (qui utilisent jquery.. )
https://codes-sources.commentcamarche.net/source/102253-exemple-ajax-en-jquery
Dans ton cas, tu retournes le code html de ta page... et donc, l'event n'est pas réinitialisé sur le "bouton"...
A savoir qu'en Ajax on évite de retourner du HTML ....
On ne retourne que les données "brute" ( au format JSON de préférence), et ensuite, c'est le javascript qui s'occupe de créer le html avec ces données....
Voici quelques exemples : (qui utilisent jquery.. )
https://codes-sources.commentcamarche.net/source/102253-exemple-ajax-en-jquery
Val_3990
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
3 juin 2020 à 15:05
3 juin 2020 à 15:05
Merci beaucoup pour le liens,
J'avoue que j'ai un peu de mal a y comprendre quelque chose (j'ai un niveau en informatique qui se limite relativement a ce que j'ai montrer), et pour ce qui est du Json j'avais déjà prévu de faire le changement mais j'aimerai (dans l'idéal) avoir une autre version de mon projet pour le Json (principalement pour avoir une base solide d'exemple pour de futur projet que j'ai en tête).
Pour ce qui est de mon code, a quelle niveau es que je "retourne" le code html (innerHtml je suppose ou alors pendant l'appel a send) ?
Et est-t-il possible de contourner cela sans avoir a transférer mes données au format Json ?
Merci d'avance et bonne après-midi.
J'avoue que j'ai un peu de mal a y comprendre quelque chose (j'ai un niveau en informatique qui se limite relativement a ce que j'ai montrer), et pour ce qui est du Json j'avais déjà prévu de faire le changement mais j'aimerai (dans l'idéal) avoir une autre version de mon projet pour le Json (principalement pour avoir une base solide d'exemple pour de futur projet que j'ai en tête).
Pour ce qui est de mon code, a quelle niveau es que je "retourne" le code html (innerHtml je suppose ou alors pendant l'appel a send) ?
Et est-t-il possible de contourner cela sans avoir a transférer mes données au format Json ?
Merci d'avance et bonne après-midi.
jordane45
Messages postés
38314
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2024
4 705
3 juin 2020 à 15:35
3 juin 2020 à 15:35
a quelle niveau es que je "retourne" le code html
ben.. dans le "Fichier PHP appelé:"
tout ce qui se trouve après la ligne 15 ....
et donc... ton script ne devrais retourner que les données de tes requêtes dans un array encodé au format JSON
et dans le code JS de ta page principale.. traiter cet array pour générer le code html de ta page
Val_3990
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
3 juin 2020 à 15:43
3 juin 2020 à 15:43
Merci pour la réponse,
Oui j'ai bien comprit que je devais générer mon code HTML a partir de données JSON et j'ai en effet prévu de le faire, cependant actuellement je ne vois pas en quoi cela changerai quelque chose a mon problème.
Quand je demandais a quelle niveau était retourner mon code html je me demandais plutôt a quelle moment es que je rendais mes eventListener inutilisable de façon a essayer de contourner temporairement le problème.
Oui j'ai bien comprit que je devais générer mon code HTML a partir de données JSON et j'ai en effet prévu de le faire, cependant actuellement je ne vois pas en quoi cela changerai quelque chose a mon problème.
Quand je demandais a quelle niveau était retourner mon code html je me demandais plutôt a quelle moment es que je rendais mes eventListener inutilisable de façon a essayer de contourner temporairement le problème.
jordane45
Messages postés
38314
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2024
4 705
Modifié le 3 juin 2020 à 16:03
Modifié le 3 juin 2020 à 16:03
Ben ici
Le plus simple étant de réécrire le code sous la forme:
if(HttpRequest.readyState == 4 &HttpRequest.status == 200) { document.getElementById('changeCusto').innerHTML = HttpRequest.responseText // Ici .. tu dois "récactiver" ton eventlistener }
Le plus simple étant de réécrire le code sous la forme:
function initBtn(){ document.getElementById('bouton').addEventListener('click',function(event){ mafonction(); }); } function mafonction(){ alert("je rentreeee") var HttpRequest = getHttpRequest() console.log("affichagse : ", document.getElementById('areatxt').value) event.preventDefault() var msg = document.getElementById('areatxt').value var elem2 = this if(HttpRequest.readyState == 4 &HttpRequest.status == 200) { document.getElementById('changeCusto').innerHTML = HttpRequest.responseText initBtn(); } HttpRequest.open('POST','monChat.php',true) HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded') HttpRequest.send("msgtxt="+ msg +"&id_customer="+elem2.getAttribute('data-id_customer')) } //initialisation du bouton pour la premiere fois : initBtn();
Val_3990
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
3 juin 2020 à 17:10
3 juin 2020 à 17:10
J'ai essayer de récupérer ce code mais j'ai eu un problème avec la fonction getAttribut. J'ai lue que de nombreuse personne avait eu ce probléme et la réponse qui revenait majotiraiment disais que l'objet visé était un objet jQuerry et non DOM.
Je ne pense pas faire face a ce probléme car le simple fait de déplacer un peu de code dans une fonction ne va pas changer le type d'un objet (enfin je pense).
J'ai tout de même essayer de changer un peu le code pour obtenir ca :
Mais cette fois-ci mon affichage de elem2.data() affiche undifined.
J'avoue que je suis pas mal perdue même si j'ai comprit l'idée de base je ne comprend pas pourquoi elle engendre de tel modification.
Je ne pense pas faire face a ce probléme car le simple fait de déplacer un peu de code dans une fonction ne va pas changer le type d'un objet (enfin je pense).
J'ai tout de même essayer de changer un peu le code pour obtenir ca :
function sendMsg(){ alert("je rentreeee") var HttpRequest = getHttpRequest() console.log("affichagse : "+document.getElementById('areatxt').value) event.preventDefault() var msg=document.getElementById('areatxt').value var elem2 = $(this) if(HttpRequest.readyState == 4 &HttpRequest.status == 200) { document.getElementById('changeCusto').innerHTML = HttpRequest.responseText initBtn(); } HttpRequest.open('POST','monChat.php',true) HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded') console.log("affichage :"+elem2.data('id_customer')) HttpRequest.send("msgtxt="+ msg +"&id_customer="+elem2.data('id_customer')) }
function initBtn(){ document.getElementById('bouton').addEventListener('click',function(event){ sendMsg(); }); }
Mais cette fois-ci mon affichage de elem2.data() affiche undifined.
J'avoue que je suis pas mal perdue même si j'ai comprit l'idée de base je ne comprend pas pourquoi elle engendre de tel modification.
jordane45
Messages postés
38314
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2024
4 705
3 juin 2020 à 17:26
3 juin 2020 à 17:26
Je n'avais pas fais gaffe à cette variable elm2
donc le code devrait ressembler à un truc du genre :
Par contre... vu que tu sembles avoir du jquery dans ta page... pourquoi ne pas écrire ton code avec cette librairie ??
ça serait plus propre...
Au lieu de faire xmlhttprequest ... fais donc du $.Ajax
Et au lieu de faire du addEventListener .. faire du
donc le code devrait ressembler à un truc du genre :
function initBtn(){ document.getElementById('bouton').addEventListener('click',function(event){ event.preventDefault() var elem2 = $(this) mafonction(elem2); }); } function sendMsg(elem2){ alert("je rentreeee"); var HttpRequest = getHttpRequest(); console.log("affichagse : "+document.getElementById('areatxt').value) var msg=document.getElementById('areatxt').value; if(HttpRequest.readyState == 4 &HttpRequest.status == 200) { document.getElementById('changeCusto').innerHTML = HttpRequest.responseText; initBtn(); } HttpRequest.open('POST','monChat.php',true); HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); console.log("affichage " , elem2.data('id_customer')); HttpRequest.send("msgtxt="+ msg +"&id_customer="+elem2.data('id_customer')); } //initialisation du bouton pour la premiere fois : initBtn();
Par contre... vu que tu sembles avoir du jquery dans ta page... pourquoi ne pas écrire ton code avec cette librairie ??
ça serait plus propre...
Au lieu de faire xmlhttprequest ... fais donc du $.Ajax
Et au lieu de faire du addEventListener .. faire du
$('#bouton').click(function(){ ...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Val_3990
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
Modifié le 3 juin 2020 à 18:27
Modifié le 3 juin 2020 à 18:27
En effet cela fonctionne bien et oui en effet quasiment tout les postes que j'ai lue écrit par des gens qui essayait de faire des choses semblables au mienne utilise cette librairie.
Dernier problème et après je te jure que je te laisse tranquille :').
J'ai essayé de faire la même chose pour pour autre fonction :
Cette fois ci la requette AJAX a bien lieu et me retourne bien le code que je souhaite mais la condition :
if(HttpRequest.readyState == 4 &HttpRequest.status == 200)
ne se valide jamais alors que son status est bien affiché a 200 dans le naviguatteur,
comme je ne sais pas comment on contrôle le "readyState" je l'ai simplement enlever et malgrès tout rien...
Désoler de te poser autant de question et merci encore pour tes réponses.
Dernier problème et après je te jure que je te laisse tranquille :').
J'ai essayé de faire la même chose pour pour autre fonction :
function changeCustomer(elem){ var HttpRequest = getHttpRequest() if(HttpRequest.readyState == 4 &HttpRequest.status == 200) { console.log("je suis la") document.getElementById('changeCusto').innerHTML = HttpRequest.responseText initChangeCusto(); } HttpRequest.open('POST','monChat2.php',true) HttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded') HttpRequest.send('id_customer='+ elem.data('id_custo')) }
function initChangeCusto(){ var links = document.querySelectorAll('.chat_friend') for(var i=0;i<links.length;i++){ var linkIndex=links[i] linkIndex.addEventListener('click', function(event){ var elem = $(this) event.preventDefault() changeCustomer(elem) }); } }
Cette fois ci la requette AJAX a bien lieu et me retourne bien le code que je souhaite mais la condition :
if(HttpRequest.readyState == 4 &HttpRequest.status == 200)
ne se valide jamais alors que son status est bien affiché a 200 dans le naviguatteur,
comme je ne sais pas comment on contrôle le "readyState" je l'ai simplement enlever et malgrès tout rien...
Désoler de te poser autant de question et merci encore pour tes réponses.
jordane45
Messages postés
38314
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2024
4 705
3 juin 2020 à 18:39
3 juin 2020 à 18:39
Là non plus je n'avais pas relu ton code....
le "and" .. c'est avec 2 &
donc
Ah.. et il serait bien également de finir (comme dans les codes que je te donne....) tes instructions par des point-virgules !
Certains navigateurs pourraient ne pas apprécier cet oubli dans tes codes ....
le "and" .. c'est avec 2 &
donc
if(HttpRequest.readyState == 4 && HttpRequest.status == 200) {
Ah.. et il serait bien également de finir (comme dans les codes que je te donne....) tes instructions par des point-virgules !
Certains navigateurs pourraient ne pas apprécier cet oubli dans tes codes ....
Val_3990
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
Modifié le 3 juin 2020 à 18:47
Modifié le 3 juin 2020 à 18:47
Il me semble que les 2 syntaxes sont acceptés pour le and (certainement plus tolérer qu'accepter), en tout cas ça ne résous pas le problème.
Val_3990
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
3 juin 2020 à 19:46
3 juin 2020 à 19:46
Je viens de faire quelque test et mon readyState reste bloqué a 0...
Beaucoup de personne on rencontré ce problème mais il était quasiment toujours lié a la fonction onReadyStateChange que je n'utilise pas.
J'avoue que la je suis vraiment pommé.
Beaucoup de personne on rencontré ce problème mais il était quasiment toujours lié a la fonction onReadyStateChange que je n'utilise pas.
J'avoue que la je suis vraiment pommé.
jordane45
Messages postés
38314
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 novembre 2024
4 705
4 juin 2020 à 09:01
4 juin 2020 à 09:01
Encore une fois... je n'avais pas relu le code complètement...;
Et donc.. si ! il faut le onreadystatechange....
L'ajax fonctionne en mode asynchrone....
Donc il continue de traiter le code Javascript sans attendre la réponse de ton script php.
Il ne rentrera donc dans ton IF ... que si tu lui demande d'attendre le changement de son statut...
Y'a pas à dire.... je ne supporte de moins en moins l'ajax en "pure" javascript....
Sincèrement... si tu as chargé jquery dans ta page... passe à la syntaxe jquery... tu auras beaucoup moins de soucis !
Et donc.. si ! il faut le onreadystatechange....
HttpRequest.onreadystatechange = function () { if(HttpRequest.readyState == 4 && HttpRequest.status == 200) { document.getElementById('changeCusto').innerHTML = HttpRequest.responseText initChangeCusto(); } }
L'ajax fonctionne en mode asynchrone....
Donc il continue de traiter le code Javascript sans attendre la réponse de ton script php.
Il ne rentrera donc dans ton IF ... que si tu lui demande d'attendre le changement de son statut...
Y'a pas à dire.... je ne supporte de moins en moins l'ajax en "pure" javascript....
Sincèrement... si tu as chargé jquery dans ta page... passe à la syntaxe jquery... tu auras beaucoup moins de soucis !
var url = "monChat2.php"; var datas = { id_customer: elem.data('id_custo') }; $.ajax({ //L'URL de la requête url: url, method: "POST", dataType : "json", data:datas }) //Ce code sera exécuté en cas de succès - La réponse du serveur est passée à done() .done(function(response){ console.log('reponse ajax',response); document.getElementById('changeCusto').innerHTML = response initChangeCusto(); }) //Ce code sera exécuté en cas d'échec - L'erreur est passée à fail() .fail(function(error){ alert("La requête s'est terminée en échec. Infos : " + JSON.stringify(error)); }) });
Val_3990
Messages postés
21
Date d'inscription
vendredi 22 mai 2020
Statut
Membre
Dernière intervention
15 juin 2020
5 juin 2020 à 10:51
5 juin 2020 à 10:51
Bonjour, merci beaucoup pour ta réponse.
Entre deux comme je n'arrivais a trouver la solution je suis en effet passer a la syntaxe jQuery et il n'y a pas photo c'est beaucoup plus simple !
Merci encore pour le coup de main et bonne journée.
Entre deux comme je n'arrivais a trouver la solution je suis en effet passer a la syntaxe jQuery et il n'y a pas photo c'est beaucoup plus simple !
Merci encore pour le coup de main et bonne journée.