Mon url ne veut pas s'exécuter via ajax

Bonsoir a tous,

Je traite des centaines de fonctions ajax, et la je ne comprends pas ou se situe le probleme, a part peut etre la gestion json.


Je m'explique, j'ai un formulaire avec des checkbox, et une fonction qui permet de selectionner plusieurs et ensuite je clique sur un lien qui declence la fonction envoyer la valeur des checkbox via ajax.

Mes checkbox :

Code:

---

1 2 3 4

<input type="checkbox" name="choix[]" class="choix" value="toto"></td> <input type="checkbox" name="choix[]" class="choix" value="titi"></td> <input type="checkbox" name="choix[]" class="choix" value="tata"></td>

---

le bouton :

Code:

---

1 2	<a href="javascript:;" onclick="relance_sms(\'.choix\',\''ceci est un message de test\'');success();">ceci est un message de test</a>

---

la fonction relance_sms est la suivante :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function relance_sms(id_class,sms) { var elts = document.querySelectorAll(id_class); var i = 0; var array_val = []; // array elts.forEach(function(id) { if (id.checked) { array_val[i] = id.value; i++; } }); var liste_val = (array_val.length > 0) ? JSON.stringify(array_val) : ""; // liste au format JSON   var xhr_object = null; if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else {alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");return;} xhr_object.open("GET", "relance_sms.php?liste="+liste_val+"&sms="+sms, true); xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) {}} xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr_object.send(null); // alert ("relance_sms.php?liste="+liste_val+"&sms="+sms); }

---

Or si je selctionne toto et tata et que je clique sur le lien, je vois bien l'alerte s'afficher :
relance_sms.php?liste=["toto","tata"]&sms=ceci est un message de test
en réalité il s'emblerait que la fonction ne l'appelle pas, puisque derriere le fichier relance_sms ne s'execute pas.

Par contre si je colle l'url : relance_sms.php?liste=["toto","tata"]&sms=ceci est un message de test dans la barre d'url, la le fichier relance_sms s'execute.

Conclusion, il semblerait que mon code AJAX ne veuille pas executer l'url

Merci pour toute l'aide que vous pourrez m'apporte. Je precise que j'ai essayé aussi avec POST a la place de GET.

Bonne soirée.
Olivier

Réponse a un post qui a disparu d'une personne voulant m'aider, pensant que j'avais a tort mis un ; entre les fonctions :

heu je ne suis pas sur ????????
le ; sert a séparer les fonctions appelées : success() n'a rien a voir avec la fonction relance_sms() !!!
Mais merci en tout cas de m'aider.

Oui après relecture de ton code j'ai volontairement supprimé, car la virgule était bien la entre les échappements j'ai omis cette virgule, et j'ai pensé que tu as un double appel js lors du "trigger" de l'événement. As tu checké les erreurs PHP Apache pour être un peu moins de le brouillard es tu au courant que ta fonction ajax n'est pas compatible cross browser et je te conseil vivement si tu peux l'utilisation de jquery pour ne pas être embêté par cette problématique, si tu souhaite que tout le monde puisque profiter de ton site.

Merci pour ces précisions concernant le cross browser .. on en apprend tous les jours, c'est pour ça que les échanges sont si précieux.

En fait je tourne sur Chrome, Safari et Firefox, et tous mes scripts fonctionnent.

C'est une apply qui n'est utilisée que par moi, donc j'ai le temps de la rendre compatible eventuellement par la suite, c'est pourquoi je tiens compte de ton avis éclairé

Par contre je ne peux verifier mon code PHP que si je mets l'URL de l'alerte dans la barre d'URL du navigateur, et la tout fonctionne.

Mais cela ne semble pas fonctionner a partir de la fonction javascript.

Merci encore de ton aide.

N'ayant pas accès a cette fameuse page PHP je ne peux pas trop me prononcer, par contre si il y a une alert lors de l'appel de la page via URL surement il y a un $_GET quelque part qui est la pour filtrer le passage de paramètre entre la page html et le script PHP côté serveur.

Un petit essai :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function relance_sms(id_class,sms) { var elts = document.querySelectorAll(id_class); var i = 0; var array_val = []; // array elts.forEach(function(id) { if (id.checked) { array_val[i] = id.value; i++; } }); var liste_val = (array_val.length > 0) ? JSON.stringify(array_val) : ""; // liste au format JSON   var xhr_object = null; if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else {alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");return;} xhr_object.open("GET", "relance_sms.php?liste="+liste_val+"&sms="+sms, true); xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) { alert ("relance_sms.php?liste="+liste_val+"&sms="+sms); }} xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr_object.send(null); }

---

L'alerte se fait parfaitement

Voici mon code PHP :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?php session_start(); require ('conx.php'); require ('session.php');   header('Content-Type: application/json'); $sms = @$_GET["sms"]; $liste=json_decode(@$_GET['liste']); foreach ($liste as $key => $value) { $client=$liste[$key]; $modif=mysql_query("INSERT INTO `".$suff_table."journal` (idUT, idCLIENT, date, statut, commentaire) VALUES ('$MB_idUT', '$client', '$date_con', 'Relance SMS', '$sms')");   }

---

Mais si le code PHP fonctionne en mettant l'url obtenue dans l'alerte dans la barre de navigation, c'est que le PHP fonctionne, donc pourquoi l'ajax le bloque ?????

il y est le retour ligne au début du code avant la balise <?php ??
Si c'est le cas ça fait planter le header

Merci SpaceFrog de m'aider mais c'est en recopiant sur ce forum que j'ai un espace, sinon le code lui n'en comporte pas, je vais editer mon ancien post.

Ta page est bien en utf8 sans BOM ?

Oui tout à fait en UTF8

c'est surtout le sans BOM qui importe

Bonsoir,

j’ai lu ce fil de conversation en entier et j’aimerais réagir sur quelques points.

Pour commencer, une chose évidente.

Citation:

---

Envoyé par kaolivier

le bouton :

Code:

---

1 2	<a href="javascript:;" onclick="relance_sms(\'.choix\',\'ceci est un message de test\');success();">ceci est un message de test</a>

---

---

J’ai copié le code de ce bouton, je l’ai collé dans un nouveau fichier HTML, ouvert ce fichier dans Firefox 57, ouvert la console JavaScript avec la touche F12. Puis j’ai cliqué sur le lien et j’ai eu ce message :

Code:

---

SyntaxError: illegal character index.html:1:12

---

Les numéros de ligne et de colonne indiquent la première séquence \' dans l’attribut onclick. Je ne sais pas ce qu’il en est dans les autres navigateurs, mais sous Firefox c’est une erreur fatale, le script ne va pas plus loin. Pour supprimer cette erreur, il suffit de retirer le backslash.

Tant qu’on parle de ce <a>, je ne veux plus voir de href="javascript:", c’est une pratique du siècle dernier qui n’avait déjà pas de bonne justification à l’époque. Ce qu’il te faut, kaolivier, c’est un élément interactif, que l’utilisateur peut facilement identifier comme tel, et qui ne mène pas vers une autre page. La balise <button> est faite pour ça.

Mais aujourd’hui encore, les navigateurs ont du mal à appliquer certains styles à <button>. Pour cette raison, il est actuellement toléré de préférer l’élément <a> à la place de <button> quand on a une charte graphique à respecter. On lui donne alors l’attribut href="#". L’inconvénient de <a> est qu’il faut annuler le comportement par défaut en ajoutant return false ou en appelant preventDefault(), selon la situation.

Citation:

---

Envoyé par kaolivier

Or si je selctionne toto et tata et que je clique sur le lien, je vois bien l'alerte s'afficher :
relance_sms.php?liste=["toto","tata"]&sms=ceci est un message de test
en réalité il s'emblerait que la fonction ne l'appelle pas, puisque derriere le fichier relance_sms ne s'execute pas.

---

Une erreur classique quand on débute avec ajax : tu n’as pas tenu compte du fait qu’ajax est asynchrone. Quand tu appelles xhr_object.send, tu lances la requête mais elle n’aboutit pas tout de suite. Ton code va jusqu’au alert avant que la réponse soit arrivée. headmax te donne la version corrigée dans son dernier message, avec le alert au bon endroit, dans la fonction onreadystatechange.

Pour te rendre la vie un peu plus facile, tu peux utiliser console.log à la place de alert, les messages apparaîtront dans la console de ton navigateur et n’interrompront pas l’exécution de tes scripts.

Une petite chose aussi à propos du JSON encodé en URL : utilise encodeURIComponent pour échapper les caractères spéciaux. Que se serait-il passé si tes données de formulaire avaient contenu, par exemple, le symbole & ? C’est valable aussi bien pour GET que pour POST.

Citation:

---

Envoyé par headmax

es tu au courant que ta fonction ajax n'est pas compatible cross browser et je te conseil vivement si tu peux l'utilisation de jquery pour ne pas être embêté par cette problématique, si tu souhaite que tout le monde puisque profiter de ton site.

---

Je suis fortement opposé à cette idée, et je vais apporter des arguments.
La page XMLHttpRequest du MDN indique que le support de base de la techno est assuré par Firefox, Chrome et Opera depuis toujours, ainsi que par Edge, IE7 sans ActiveX, et Safari 1.2. On peut tirer de ces faits deux conclusions :

1. la techno est très, très largement supportée ;
2. on ne doit prendre en charge les ActiveX que si on est obligé de supporter IE6. (dans tous les sens du terme :roll:)

Donc, pour créer un objet ajax, cette ligne de code suffit :

Code:

---

var xhr_object = new XMLHttpRequest();

---

Pour appuyer encore plus mes propos, cette page de caniuse.com chiffre le support du niveau 2 de XMLHttpRequest, les fonctionnalités avancées (qui ne sont pas utilisées ici) et on peut voir dans le coin à droite que ces fonctionnalités sont supportées à plus de 94 %.

Aujourd’hui le débat se ferait plutôt sur l’utilisation en production de Fetch, mais franchement, pour XHR, il n’y a aucune question à se poser.

Quant à suggérer jQuery pour ça, je ne suis pas d’accord. La compatibilité est un questionnement de professionnel. Quand on débute, qu’on fait des expériences et qu’on cherche à apprendre, un framework est contre-productif. Un framework ne nous apprend pas le vrai fonctionnement des choses.

Citation:

---

Envoyé par kaolivier

Voici mon code PHP :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?php session_start(); require ('conx.php'); require ('session.php');   header('Content-Type: application/json'); $sms = @$_GET["sms"]; $liste=json_decode(@$_GET['liste']); foreach ($liste as $key => $value) { $client=$liste[$key]; $modif=mysql_query("INSERT INTO `".$suff_table."journal` (idUT, idCLIENT, date, statut, commentaire) VALUES ('$MB_idUT', '$client', '$date_con', 'Relance SMS', '$sms')");   }

---

Mais si le code PHP fonctionne en mettant l'url obtenue dans l'alerte dans la barre de navigation, c'est que le PHP fonctionne, donc pourquoi l'ajax le bloque ?????

---

Très belle vulnérabilité aux injections SQL :D Mais j’ai déjà dit beaucoup de choses dans ce post, on va garder ça pour plus tard.

Si la requête fonctionne quand tu utilises la barre de navigation, c’est un indice qu’il y a assez probablement une erreur dans le JavaScript. Ouvre ta console et dis-nous si tu vois un message d’erreur :)

Oula tout cela est hyper interessant Watilin et je vais de ce pas faire les modifs pour voir ce que me dit la console.

Par contre pour :

Code:

---

<a href="javascript:;" onclick="relance_sms(\'.choix\',\''ceci est un message de test\'');success();">ceci est un message de test</a>

---

Je n'avais pas mis le code en entier, mais cette ligne fait suite a un echo php, donc la ligne complète est :

Code:

---

echo '<a href="javascript:;" onclick="relance_sms(\'.choix\',\''ceci est un message de test\'');success();">ceci est un message de test</a>';

---

D'ou le addslashes

Pour le reste, je modifie de suite et je reviens vers vous.

MERCCCCCCCCCI deja a tous pour votre aide.

On dirait que tu as quand même des problèmes de guillemets — regarde ce que fait la coloration syntaxique de ce forum. C’est sans doute un problème de recopie car, en l’état, ça n’est même pas du PHP syntaxiquement correct.

Pour t’éviter des problèmes de guillemets, tu peux extraire le JS de ton code HTML en utilisant un gestionnaire d’évènement (parfois aussi appelé « écouteur ») :

Code:

---

<button id="test">ceci est un message de test</button>

---

Code:

---

1 2 3 4

document.querySelector("#test").addEventListener("click", function (event) { relance_sms(".choix", "ceci est un message de test"); success(); };

---

D’autre part, n’oublie pas de vérifier la présence de la BOM (Byte Order Mark) comme l’a dit SpaceFrog. Normalement tu peux faire ça avec ton éditeur de texte / IDE ;)

Re bonjour a tous,

Cela fait 1 semaine que j'essaie d'appliquer tous les conseils et toujours rien je ne comprends pas, meme avoir viré href="javascript:;" m'a posé plus de pbs qu'autre chose.

Concernant le BOM j'ai verifie il n'est pas inclus.

en cliquant sur ce lien :

Code:

---

<a href="javascript:;" onclick="relance_sms('.choix','B - ceci est le contenu du texto 2');"><input name="sms_2" type="checkbox" value=""> B - ceci est le contenu du texto 2</a>

---

je declenche bien la fonction relance_sms :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function relance_sms(id_class,sms) { var elts = document.querySelectorAll(id_class); var i = 0; var array_val = []; // array elts.forEach(function(id) { if (id.checked) { array_val[i] = id.value; // on récupère les value des cases cochées i++; } }); var liste_val = (array_val.length > 0) ? JSON.stringify(array_val) : ""; // liste au format JSON // alert(liste_val); var xhr_object = null; if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else {alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");return;} xhr_object.open("GET", "relance_sms.php?liste="+liste_val+"&sms="+sms, true); xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) {alert ("relance_sms.php?liste="+liste_val+"&sms="+sms);}} xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr_object.send(null);   }

---

L'alerte fonctionne parfaitement et c'est tout.....
le script ne semble pas appeler l'url : relance_sms.php?liste="+liste_val+"&sms="+sms

Par contre si je copie l'alerte et que je la mette dans la barre d'adresse de mon navigateur, la c'est parfait les scripts présents dans le fichier relance_sms.php fonctionnent parfaitement.

Alors pourquoi le script JS , donc la function relance_sms est bien appelée, mais n’exécute pas l'url de destination, alors que l'alerte fonctionne ?????

Merci pour toute aide supplémentaire

Ouvre les outils F12 de ton navigateur et dis-nous ce que tu vois quand tu cliques sur ton bouton,
:arrow: dans le panneau console,
:arrow: et dans le panneau réseau.

Si ton alert s’affiche c’est que ta requête atteint le readyState 4, et ça veut dire que le serveur a répondu.

Quelques conseils en vrac…

• Utilise console.log à la place de alert.
• Crée ton objet ajax en une seule instruction : var xhr_object = new XMLHttpRequest(); (j’ai déjà parlé de ça).
• Pas besoin de Content-Type quand tu envoies tes données en GET

Et à propos de cette histoire de javascript:, on va s’en débarrasser une bonne fois pour toutes. On fait comme ça :

Code:

---

1 2 3

<a href="#" id="relance-button"> <input name="sms_2" type="checkbox" value=""> B - ceci est le contenu du texto 2 </a>

---

Code:

---

1 2 3 4

document.querySelector("#relance-button").addEventListener("click", function (event) { event.preventDefault(); relance_sms(".choix", "B - ceci est le contenu du texto 2"); });

---

Mais comme je l’ai déjà dit, c’est mieux si tu peux utiliser <button>.

Autre chose, tu as un input dans un lien, autrement dit tu as deux éléments interactifs imbriqués l’un dans l’autre. Tu peux imaginer, je pense, les comportements incohérent que ça risque d’entraîner. Tu devrais corriger ça. Si, dans le cas présent, la case à cocher sert juste d’indication visuelle, tu peux la remplacer par une icône, ou bien lui mettre un attribut disabled.

Citation:

---

Envoyé par Watilin

Ouvre les outils F12 de ton navigateur et dis-nous ce que tu vois quand tu cliques sur ton bouton,
:arrow: dans le panneau console,
:arrow: et dans le panneau réseau.

---

Fait, dans la console apparait : relance_sms.php?sms=B - ceci est le contenu du texto 2&liste=["4","1"]
Dans reseau, apparait bco d'infos : mais je ne vois rien de particulier.

Citation:

---

Envoyé par Watilin

[*]Utilise console.log à la place de alert.[*]Crée ton objet ajax en une seule instruction : var xhr_object = new XMLHttpRequest(); (j’ai déjà parlé de ça).[*]Pas besoin de Content-Type quand tu envoies tes données en GET

---

Fait

Citation:

---

Envoyé par Watilin

Et à propos de cette histoire de javascript:, on va s’en débarrasser une bonne fois pour toutes. On fait comme ça :

Code:

---

1 2 3

<a href="#" id="relance-button"> <input name="sms_2" type="checkbox" value=""> B - ceci est le contenu du texto 2 </a>

---

Code:

---

1 2 3 4

document.querySelector("#relance-button").addEventListener("click", function (event) { event.preventDefault(); relance_sms(".choix", "B - ceci est le contenu du texto 2"); });

---

---

Cette partie de code remplace effectivement mon ancien code mais j'ai le meme resultat dans la console sans pour autant parvenir a declencher l'url comme avant, donc au meme point, mais avec un code bien plus propre.

Console apparait : relance_sms.php?sms=B - ceci est le contenu du texto 2&liste=["4","1"]

Avec le panneau réseau tu devrais voir une nouvelle requête apparaître à chaque fois que tu cliques sur le bouton.

Une idée qui me vient tardivement : les espaces dans le JSON posent peut-être problème. Essaye ceci :

Code:

---

1 2 3

var liste_val = encodeURIComponent( (array_val.length > 0) ? JSON.stringify(array_val) : "" );

---

La doc : encodeURIComponent

J'ai appliqué le correctif json, et l'url est bien appelée cette ci, par contre le fichier PHP en fin de parcours ne s’exécute pas correctement, je vais voir de ce coté la et je reviens vers vous, merci en tout cas pour votre aide.