Mauvaise éxecution d'Ajax sous IE seulement ?!?! [Résolu]

[will89]

Bonsoir tout le monde, je poste alors que c'est la fin de ma journée, je répondrai donc surement demain.

Je suis en train de développer un moteur de recherche de vêtements avec des cases à cocher. J'y joins de l'Ajax pour qu'à chaque action du client sur les checkboxs de choix des critères, une requête soit envoyé au serveur pour mettre à jour un champ avec le nombre d'articles correspondant à la requête.

Cela marche très bien sous FF, mais sous IE (6 et 7), l'appel marche une fois puis il me retourne ensuite toujours pareil.

En fait, je sais qu'il est appelé à chaque fois puisqu'en remplaçant :

Code :

document.getElementById('nb_resultat_recherche').innerHTML = xmlHttp.responseText;

par

Code :

alert(xmlHttp.responseText);

la fenêtre d'alerte JS apparait tout le temps mais avec tout le temps le même résultat (le premier).

Voici donc le code source :

la fonction Ajax :

Code :

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
      // creation du pont entre JS et PHP (pour l'AJAX)
      function GetXmlHttpObject() { 
        var objXMLHttp = null;
        if (window.XMLHttpRequest) objXMLHttp=new XMLHttpRequest();
        else if (window.ActiveXObject) objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return objXMLHttp;
      }
 
      // ajax pour la mise a jour de la liste des categories quand on choisit une marque dans le menu de recherche rapide
 
      function rechArticle(form) {
          xmlHttp = GetXmlHttpObject();
          if (xmlHttp == null) {
              alert("Votre navigateur ne supporte pas les requêtes HTTP.");
              return false;
          }
          var url="recherche_ajax.php"; // le script à appeller
          // fonction à exécuter dès réception de la réponse
          xmlHttp.onreadystatechange = function(){
              if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
              document.getElementById('nb_resultat_recherche').innerHTML = xmlHttp.responseText; //on affiche ce que le serveur renvoie
              //alert(xmlHttp.responseText);
          }
          xmlHttp.open("GET", url, true);//envoi en GET asynchrone
          xmlHttp.send(null);
          return true;
      }

l'appel de cette fonction se fait sur le onclick sur chaque checkbox du formulaire

et voici le bout de PHP qui me retourne le nombre d'articles (c'est aléatoire pour le moment, en attendant que je construise la vraie requête)

Code :

1
2
3
4
<?php
  $nb = rand(0,200);
  echo $nb;
?>

tout ce qu'il y a de plus simple donc...

Voila, vous pouvez voir la page en construction ici...

[will89]

Bon, désolé de remettre ça mais j'ai vraiment pas d'explications au problème... Si quelqu'un a déjà eu ce genre de souci, qu'il n'hésite pas à m'en parler, ça m'empêche d'avancer, tout simplement...

PS : en appelant directement dans mon navigateur le script recherche_ajax.php, qui me renvoit le nombre aléatoire, j'obtiens l'effet voulu, que ce soit sous FF ou IE (6 et 7). Le problème vient donc bien de l'AJAX ?!?!

PS 2 : le bloc que je mets à jour n'est pas un div mais un span... Cela ne pose pas de problèmes à Firefox, mais peut-être à IE...

[will89]

J'ai l'impression que IE garde quelque part en cache le résultat du premier appel AJAX. En effet, si je rafraichis ma page en faisant Ctrl+F5 (pour vider le cache en même temps ), le résultat dans mon span (j'en profite pour dire que span ou div, c'est pareil) change au nouveau premier clic sur une des checkboxs...

[Bovino]

Code :

var url="recherche_ajax.php"; // le script à appeller

Ajoute un timestamp à la suite de url (par exemple avec new Date()) pour éviter de récupérer ce qui est dans le cache.

[Katachana]

Et comme ca :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
      // ajax pour la mise a jour de la liste des categories quand on choisit une marque dans le menu de recherche rapide
 
      function rechArticle(form) {
          xmlHttp = GetXmlHttpObject();
          if (xmlHttp == null) {
              alert("Votre navigateur ne supporte pas les requêtes HTTP.");
              return false;
          }
          var url="recherche_ajax.php"; // le script à appeller
xmlHttp.open("GET", url, true);//envoi en GET asynchrone
          xmlHttp.send(null);
          return true;
          // fonction à exécuter dès réception de la réponse
          xmlHttp.onreadystatechange = function(){
              if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
              document.getElementById('nb_resultat_recherche').innerHTML = xmlHttp.responseText; //on affiche ce que le serveur renvoie
              //alert(xmlHttp.responseText);
          }
 
      }

[will89]

Katachana... j'ai regardé ta solution... tu as seulement changé l'ordre du code à l'intérieur de la fonction... J'avais déjà trouvé cette solution sur je ne sais plus quel blog.. Elle ne change rien à mon problème..

Par contre, Bovino, ta solution peut marcher, seulement je ne vois pas trop comment la mettre en oeuvre.. Ou doit ajouter le timestamp, et comment cela se présente...

[will89]

Je ne sais pas si c'est à ça que tu pensais Bovino... mais voila le code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      function rechNbArt(form)
      {
      // on crée le pont entre JS et PHP
        xmlHttp = GetXmlHttpObject();
        if (xmlHttp == null) {
            alert("Votre navigateur ne supporte pas les requêtes HTTP.");
            return false;
        }
      // on crée les listes de paramètres pour la requête
        var url="recherche_ajax.php"; // le script à appeller
        var datee = new Date();
      // fonction à exécuter dès réception de la réponse
        xmlHttp.onreadystatechange = function(){
            if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
            document.getElementById('nb_resultat_recherche').innerHTML = xmlHttp.responseText; //on affiche ce que le serveur renvoie
            //alert(xmlHttp.responseText);
        }
      // envoi de la requête au serveur
        xmlHttp.open("GET", url, true);//envoi en GET asynchrone
        xmlHttp.send(null);
        return true;
      }

Ca en change rien non plus...

[Bovino]

Ben non, là ton Date() ne sert à rien, il faut l'ajouter à l'URL pour que IE ne cherche pas dans le cache :

Code :

1
2
3
4
var url="recherche_ajax.php"; // le script à appeller
        var datee = new Date();
        url +=datee;
      // fonction à exécuter dès réception de la réponse

[will89]

OK... c'est vrai que je me demandai aussi a quoi ça pouvait bien servir... Mais bon comme j'ai plus aucune idée.. Je crois que t'aurais pu me dire n'importe quoi, j'aurai bu tes paroles comme un pilier de bar descend ses demis...

[Bovino]

C'est parceque je suis un pilier de bar que tu dis ça ??? Tu me connais ??? C'est toi Pierrot ?
Blague à part, ça marche ou pas ? ( quand même)

[will89]

Hourra... alors je comprends toujours pas...

Sa marche bien avec ce que tu m'as filé.... Seulement, c'est pas la première fois que j'utilise cette fonction pour faire de l'AJAX, mais c'est la première fois que je rencontre ce problème bizarre..

SI quelqu'un a une explication je suis preneur..

Et sinon, je vous mets quand même le code final (qui marche donc sous IE 6 et 7, en plus des autres navigateurs) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
      // ajax pour aller chercher le nombre d'articles correspondant aux critères choisis
      function rechNbArt(form)
      {
      // on crée le pont entre JS et PHP
        xmlHttp = GetXmlHttpObject();
        if (xmlHttp == null) {
            alert("Votre navigateur ne supporte pas les requêtes HTTP.");
            return false;
        }
      // on crée les listes de paramètres pour la requête (la date sert a rafraichir le cache de IE, encore lui, qui fait chier...)
        var datee = new Date();
        var dataa = datee.getFullYear() + "-" + datee.getMonth() + "-" + datee.getDate() + "-" + datee.getHours() + "-" + datee.getMinutes() + "-" + datee.getSeconds() + "-" + datee.getMilliseconds();
        var url="recherche_ajax.php?date=" + dataa; // le script à appeller
      // fonction à exécuter dès réception de la réponse
        xmlHttp.onreadystatechange = function(){
            if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
            document.getElementById('nb_resultat_recherche').innerHTML = xmlHttp.responseText; //on affiche ce que le serveur renvoie
            //alert(xmlHttp.responseText);
        }
      // envoi de la requête au serveur
        xmlHttp.open("GET", url, true);//envoi en GET asynchrone
        xmlHttp.send(null);
        return true;
      }

Edit à 17h02 : désolé Bovino, fallait pas le prendre pour toi... Je dis ça parce que je m'y connais en pilier de bar, même si je suis plus spécialiste des pintes que des demis...