1. ‍Vérifiez vos pages zombies SEO sur votre site !!! Elles plombent votre référencement et ne vous rapportent rien... Je le détaille dans mon tuto Pages Zombies SEO
    Rejeter la notice

Fonction Ajax qui bug parfois

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 11 Mars 2018.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    621
    J'aime reçus:
    1
    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.
     
  2. rick38
    rick38 WRInaute impliqué
    Inscrit:
    23 Février 2013
    Messages:
    792
    J'aime reçus:
    48
    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.
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    621
    J'aime reçus:
    1
    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');">
     
  4. rick38
    rick38 WRInaute impliqué
    Inscrit:
    23 Février 2013
    Messages:
    792
    J'aime reçus:
    48
    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 :

    Code:
    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 :

    Code:
    $.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.
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    621
    J'aime reçus:
    1
    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.
     
Chargement...
Similar Threads - Fonction Ajax bug Forum Date
Supprimer ajax d'une petite fonction JS Développement d'un site Web ou d'une appli mobile 29 Novembre 2018
Formulaire Ajax fonctionne mais pas pour radio ! Développement d'un site Web ou d'une appli mobile 9 Septembre 2011
Mon bouton Ajax ne fonctionne pas toujours Développement d'un site Web ou d'une appli mobile 22 Juillet 2009
Fonction test cookie et référencement Crawl et indexation Google, sitemaps 11 Novembre 2018
Redirection transparente ne fonctionne pas :-( URL Rewriting et .htaccess 2 Novembre 2018
Quelle signature pour cette fonction de mail ? Développement d'un site Web ou d'une appli mobile 12 Octobre 2018
Les options d'URL pour le tracking ne fonctionne pas AdWords 13 Août 2018
Htaccess ErrorDocument ne fonctionne pas tout le temps Développement d'un site Web ou d'une appli mobile 30 Avril 2018
Tracer le fonctionnement d'Apache (2.2.15) Administration d'un site Web 23 Avril 2018
Balise title en fonction du pays Référencement international (langues, pays) 20 Avril 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice