Problème avec un menu en ajax via jquery

[poupilou]

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 :

$('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.

 

[emualliug]

Pourquoi impliquer de l'AJAX ? Ce type de menu ne nécessite que du JS et du CSS…

 

[rick38]

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.

 

[poupilou]

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.

 

[UsagiYojimbo]

Tu peux faire de l'offuscation.

 

[rick38]

Le mega menu est utile pour l'internaute mais néfaste pour le référencement...

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

 

[UsagiYojimbo]

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.

 

[poupilou]

Tu peux faire de l'offuscation.

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

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

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 ?

 

[spout]

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

 

[poupilou]

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.

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(....) ?

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

Est-ce que cette fonction jquery est mieux pour charger mon fichier php externe ?

$(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";
        }
    });
});

 

[poupilou]

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.

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";
  }
  });
}

 

[poupilou]

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 :

$(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 :

$(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 ?