Problème avec un menu en ajax via jquery

Discussion dans 'Problèmes de référencement spécifiques à vos sites' créé par poupilou, 6 Février 2022.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Salut à tous,

    J'essaie de mettre en place sur mon site un menu de ce type : collapse sidebar.

    Je voudrais charger mon menu en ajax via jquery, voici mon code pour charger ce menu :
    Code:
    $('body').on('click','.openbtn',function(){
          var xmlhttp;
          if(window.XMLHttpRequest)
          {
              xmlhttp = new XMLHttpRequest();
          }
          else
          {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
              if(this.readyState==4 && this.status==200)
              {         
              document.getElementById("mySidebar").style.width = "300px";             
              document.getElementById("mySidebar").innerHTML=xmlhttp.responseText;
              document.getElementById("main").style.marginLeft = "300px";
              }
          }
          xmlhttp.open("GET","../scripts/popupMenu.php",true);
          xmlhttp.send();
    });
    
    L'ouverture et le chargement du menu qui est contenu dans mon fichier popupMenu.php fonctionnent très bien mais une fois le menu chargé et affiché lorsque je clique sur les boutons <button class="dropdown-btn">, les sous-menus contenus dans la div <div class="dropdown-container"> ne s'ouvrent pas :(

    Je pense que c'est un problème avec le DOM et la transmission de la class="dropdown-btn", voyez-vous une solution pour faire fonctionner cela ?

    Merci d'avance pour vos réponses.
     
  2. emualliug
    emualliug WRInaute impliqué
    Inscrit:
    1 Février 2020
    Messages:
    510
    J'aime reçus:
    122
    Pourquoi impliquer de l'AJAX ? Ce type de menu ne nécessite que du JS et du CSS…
     
  3. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    2 093
    J'aime reçus:
    378
    Curieux en effet...

    Sinon le bug est que probablement l'évènement sur dropdown-btn est exécuté avant et non pas après que le menu ait été chargé, on a pas assez de code pour savoir. Mais l'idée de l'ajax pour un menu est mauvaise.
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Merci pour vos réponses.

    Il s'agit d'un mega menu et je ne veux pas qu'il y ai 150 liens en dur dans le code source car ce n'est pas bon pour le référencement.

    La question est la suivante : comment construire un mega menu sans que les crawlers voient tous ces liens dans le code source ?

    Le mega menu est utile pour l'internaute mais néfaste pour le référencement... d'où mon idée d'utiliser de l'ajax pour afficher ce menu.
     
  5. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 018
    J'aime reçus:
    133
    Tu peux faire de l'offuscation.
     
  6. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    2 093
    J'aime reçus:
    378
    C'est ta croyance.
    Ce qui est bien en SEO c'est que beaucoup de postulats ne reposent sur rien...
    Ma croyance : la quantité de liens dans un header, un menu, un footer ne posent pas de problème, Google reconnaît qu'il ne s'agit pas du contenu de la page (en détectant les parties communes, dupliquées), les liens dedans n'ont pas d'importance, ils aident juste au crawler à trouver les pages (et à l'internaute).
     
  7. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 018
    J'aime reçus:
    133
    Pour le coup je trouve ça relativement censé de ne pas forcément vouloir que le bot se prenne dans la tête un gros volume de liens internes sur toutes les pages du site avant de pouvoir s'intéresser au contenu. Quand je peux, j'aime assez offusquer les mega menu sur les pages internes.
     
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Oui j'y avais pensé mais il va y avoir quand même dans le code source toutes les ancres de ces centaines de liens, c'est quand même beaucoup moins propre que si l'on affiche an ajax un menu dans une div, dans ce cas là tu trouveras dans le code source uniquement la div en question : <div class="openMenu"></div> et c'est tout :)

    Oui je sais cela mais dans le cas de certaines stratégies de linking et maillage interne d'un site, les nombreux liens dans le header et le footer sont néfastes à la stratégie mise en place.

    Quelqu'un voit-il une solution à mon problème de départ ?
     
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 207
    J'aime reçus:
    365
    Ce serait plus facile de générer 1 seul menu en full JS (jQuery .after() ou element.insertAdjacentHTML
    ) dans un fichier externe, ainsi pas de latence réseau lors du click.

    NB : à quoi bon utiliser xmlhttp = new XMLHttpRequest(); vu que t'as déjà jQuery (à moins que tu utilises la version slim ?), de plus pas besoin de Microsoft.XMLHTTP c'est largement supporté : https://caniuse.com/mdn-api_xmlhttprequest_status
     
    UsagiYojimbo apprécie ceci.
  10. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Merci spout pour ta réponse. Je souhaite effectivement charger mon menu depuis un fichier php externe (../scripts/popupMenu.php) dans lequel je construit mon menu via des requêtes mysql qui va chercher les urls et les noms de mes pages dans l'une de mes tables. Si je comprends bien cet exemple avec jquery after() on ajoute <p>Hello world!</p> après chaque paragraphe après avoir cliqué sur le bouton. Est-ce qu'avec cette fonction jquery after () je vais pouvoir ouvrir mon menu à gauche de mon écran, comme sur cet exemple collapse sidebar ? D'autre part, comment insérer le code de mon menu dans la parenthèse jquery after(....) ?

    Est-ce que cette fonction jquery est mieux pour charger mon fichier php externe ?
    Code:
    $(document).on('click','.openbtn',function(){
        $.ajax({
            url: '../scripts/popupMenu.php',
            timeout: 5000,
            success: function (data) {           
                document.getElementById("mySidebar").style.width = "300px";
                $('#mySidebar').html(data);           
                document.getElementById("main").style.marginLeft = "300px";
            }
        });
    });
    
     
    #10 poupilou, 8 Février 2022
    Dernière édition: 8 Février 2022
  11. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    Je viens de résoudre mon problème.

    J'avais mis le code javascript ci-dessous dans un fichier js externe, si je met ce code javascript dans le fichier php de mon menu, ça marche :) lorsque je clique sur les button class="dropdown-btn" les sous-menus s'ouvrent et s'affichent.
    Code:
    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
    }
    
    /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
    var dropdown = document.getElementsByClassName("dropdown-btn");
    var i;
    
    for (i = 0; i < dropdown.length; i++) {
      dropdown[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var dropdownContent = this.nextElementSibling;
      if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
      } else {
      dropdownContent.style.display = "block";
      }
      });
    }
     
  12. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    J'ai un petit souci avec l'ouverture de mon menu et un conflit d'ajax.

    Pour ouvrir mon menu j'ai cette fonction jquery :
    Code:
    $(document).on('click','.openbtn',function(){
        $.ajax({
            url: '../scripts/popupMenu.php',
            timeout: 5000,
            success: function (data) {          
                document.getElementById("mySidebar").style.width = "300px";
                $('#mySidebar').html(data);          
                document.getElementById("main").style.marginLeft = "300px";
            }
        });
    });
    
    Sur la page qui affiche mes produits j'ai une image loader qui fait patienter l'utilisateur en attendant le chargement complet de ces produits. Cette image est affichée au chargement de la page via ce code jquery :
    Code:
    $(function(){
    /* Code javascript ici */
    $(document).ajaxStart(function() {
    var loader = "../images/ajax-loader-2.gif";
    $('#frame_page').html('').html('<br><br><br><br><div style="text-align:center;"><img src="' + loader + '" alt="#"></div>');
    });
    /* Code javascript ici */
    });
    
    Le souci c'est que lorsque je clique sur le bouton pour ouvrir mon menu, il s'ouvre parfaitement bien mais ça exécute aussi le code jquery du loader $(document).ajaxStart(function() et mes produits ne sont plus affichés, l'image du loader masque mes produits. Mes produits et le loader sont chargés dans la même div frame_page. Comment solutionner ce problème ?
     
Chargement...
Similar Threads - Problème menu ajax Forum Date
problème lien menu deroulant sur wix Demandes d'avis et de conseils sur vos sites 23 Janvier 2019
probleme decallage menus VPNDISCOUNT Développement d'un site Web ou d'une appli mobile 7 Décembre 2013
Problème message et slidemenu Développement d'un site Web ou d'une appli mobile 13 Juin 2013
Probleme Liens menu URL Rewriting et .htaccess 22 Mai 2012
Probleme de menu déroulant Développement d'un site Web ou d'une appli mobile 23 Août 2011
Problème avec sous menu en php Développement d'un site Web ou d'une appli mobile 22 Avril 2011
Probleme Menu JS + CSS Développement d'un site Web ou d'une appli mobile 24 Février 2011
Probleme avec menu deroulant Développement d'un site Web ou d'une appli mobile 4 Novembre 2010
menu horizontal défilant en css...un problème d'alignement Développement d'un site Web ou d'une appli mobile 1 Novembre 2010
Menu déroulant probleme referencement Débuter en référencement 6 Octobre 2010
probleme de menu Développement d'un site Web ou d'une appli mobile 6 Octobre 2010
Problème Menu Développement d'un site Web ou d'une appli mobile 6 Août 2010
Google Chrome : problème affichage menu Google : l'entreprise, les sites web, les services 12 Février 2010
Probleme margin padding dans une liste pour un menu avec puce Développement d'un site Web ou d'une appli mobile 5 Juin 2009
problème avec menu dynamique sous firefox Développement d'un site Web ou d'une appli mobile 8 Juin 2008
Positionnement du menu déroulant (PROBLEME) Développement d'un site Web ou d'une appli mobile 10 Mars 2008
[Résolu] Problème : Menu déroulant Js, session_destroy(). Développement d'un site Web ou d'une appli mobile 30 Décembre 2007
[Résolu]Problème de soulignement dans un menu Développement d'un site Web ou d'une appli mobile 9 Juillet 2007
[Résolu]Problème menu en fonction du naviguateur Développement d'un site Web ou d'une appli mobile 30 Juin 2007
[RESOLU]Probleme tres simple CSS menu Développement d'un site Web ou d'une appli mobile 28 Juin 2007