Fonction Ajax qui bug parfois

Salut à tous,

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

Code:

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.

 

Merci pour ta réponse.

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

Code:

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 :

Code:

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 :

Code:

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

 

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 :

Code:

<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.