Fonction Ajax qui bug parfois

[poupilou]

Salut à tous,

J'ai cette fonction ci-dessous que j'utilise dans un tableau html.

function showDetailsArticleTable(str)
{
 if(str=="")
 {
   document.getElementById("details-article-table_"+str).innerHTML="";
 return;
 }
 if(window.XMLHttpRequest)
 {
   xmlhttp=new XMLHttpRequest();
 }
 else
 {
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
   {
   if(xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("details-article-table_"+str).innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","../vente/details_article_inc.php?num="+str,true);
 xmlhttp.send();
}

Lorsqu'on clique sur une ligne <tr> du tableau ça exécute cette fonction, une <div> s'ouvre sous la ligne <tr> et affiche le détail de mon article. Ca marche dans 95% des cas mais parfois en cliquant sur la ligne le chargement des données dans la <div> ne se fait pas et ça bloque, mon site rame... et je suis obligé de fermer mon navigateur et de le ré-ouvrir pour retrouver un fonctionnement normal.

Y a-t-il quelque chose dans cette fonction qui déconne ou qui pourrait être amélioré ?

Je peux vous envoyer par MP l'url de mon site, dans ce cas là merci de m'indiquer votre adresse IP afin que j'autorise votre IP à accéder à mon site.

Merci pour votre aide.

 

[rick38]

Je ne sais pas parce que j'utilise jQuery pour ça, mais je vois 2 erreurs théoriques (par exemple si on clique une 2nd fois alors que le précédent chargement n'a pas été fini).
xmlhttp devrait être une variable locale en non globale, pour que chaque exécution utilise la sienne, donc "var xmlhttp" pour sa déclaration.
Et (xmlhttp.readyState==4 && xmlhttp.status==200) devrait être (this.readyState==4 && this.status==200) pour éviter un problème du même genre.

 

[poupilou]

Merci pour ta réponse.

J'ai modifié ma fonction, la voici et elle à l'air de fonctionner

function showDetailsArticleTable(str)
{
if(str=="")
{
   document.getElementById("details-article-table_"+str).innerHTML="";
return;
}
if(window.XMLHttpRequest)
{
   var xmlhttp = new XMLHttpRequest();
}
else
{
   var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
   {
   if(this.readyState==4 && this.status==200)
     {
     document.getElementById("details-article-table_"+str).innerHTML=xmlhttp.responseText;
     }
   }
xmlhttp.open("GET","../vente/details_article_inc.php?num="+str,true);
xmlhttp.send();
}

C'est bien cela qu'il fallait faire ?

Comment ferais-tu avec jquery pour faire la même chose ?

Il est préférable d'utiliser jquery ou sa propre fonction javascript ?

Un autre souci : ma fonction "showDetailsArticleTable" s'exécute lorsqu'on clique sur la ligne <tr> pour ouvrir la <div> et elle s'exécute aussi lorsqu'on clique une deuxième fois pour fermer la <div>, comment faire pour qu'elle ne s'exécute pas lorsqu'on clique pour fermer la <div> ?

J'utilise une autre fonction pour ouvrir/fermer la <div>, que voici :

function toggleSibling(sibling){
    sibling = sibling.nextSibling;
    while(!/tr/i.test(sibling.nodeName)){
      sibling = sibling.nextSibling;
    }
    sibling.style.display = sibling.style.display == 'table-row' ? 'none' : 'table-row';
}

Ma ligne <tr> ressemble à ça :

<tr onclick="toggleSibling(this);showDetailsArticleTable('4');">

 

[rick38]

Oui enfin moi j'aurais mis la déclaration de variable au-dessus, parce qu'en js ça peut passer mais dans d'autres langages où la variable peut être hyper locale (elle n'existe que dans le "if") ça ne marcherait pas, donc je préfère :

var xmlhttp;

if(window.XMLHttpRequest)
{
   xmlhttp = new XMLHttpRequest();
}
else
{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Il y a les pour et contre jquery, mais je pense que lorsqu'on est pas un expert expert, jquery évite les problèmes notamment de compatibilité entre browsers, il y a différentes façon de faire mais ça serait comme ça :

$.ajax({
    url: '../vente/details_article_inc.php?num=' + str,
    success:
        function(retour) {
        $('#details-article-table_' + str).html(retour);
    }
});

Je connais pas ta div et ne sait pas où elle est, sans doute qu'il faut lui ajouter un évènement onclick avec en js "event.stopPropagation();" pour éviter que le clic se propage à ses élements parents.

 

[poupilou]

J'ai modifié ma fonction showDetailsArticleTable(str) avec le var xmlhttp; mais malgré cela, de temps à temps, ma <div> ne s'ouvre pas lorsque je clique sur une ligne <tr> et ça plante

Est-il possible de rajouter dans la fonction showDetailsArticleTable(str) une limite de temps : stopper la requête ajax après 2 secondes après avoir cliqué sur le <tr> ?

D'autre part concernant le event.stopPropagation(); j'ai essayé de le mettre dans le onclick de ma ligne <tr> mais ça ne marche pas :

<tr onclick="toggleSibling(this);showDetailsArticleTable('4');event.stopPropagation();">

Ma <div> s'ouvre et se ferme sur le onclick de la ligne <tr> c'est ma fonction toggleSibling(this); qui permet cela.