Discussion :

[Damsee]

Bonjour à tous,

Dans le cadre de mon projet, j'utilise un menu dynamique en javascript que je mets à jour via des appels AJAX sur une base de données.

Voici le code JS avec la gestion AJAX :

Code HEAD/SCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript" src="my.js"></script>
  <script type="text/javascript">
  function xhrSend(div, URL) {
    var xhr = createXHR();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById(div).innerHTML = xhr.responseText;
      }
    }
    xhr.open("POST", URL, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.send();
  }
  </script>

Voici une partie du corps de la page avec le menu chargé dynamiquement dont la fonction show() est décrite dans le fichier my.js défini en en-tête

Code BODY :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
  <div id="barmenu">
    <div class="barmenu" id="menu1"><a href="#">Menu 1</a></div>
    <div class="barmenu" id="menu2"><a href="#">Menu 2</a></div>
    <div class="barmenu" id="menu3" onclick="show(this)"><a href="#">Menu 3</a></div>
    <div id="submenu3" style="display:none">
      <div class="submenu"><a href="#">Sous-Menu 3.1</a></div>
      <div class="submenu"><a href="#">Sous-Menu 3.2</a></div>
      <div class="submenu"><a href="#">Sous-Menu 3.3</a></div>
    </div>
    <div class="barmenu" id="menu4" onclick="show(this)"><a href="#">Menu 4</a></div>
    <div id="submenu4" style="display:none">
      <div class="submenu"><a href="#">Sous-Menu 4.1</a></div>
      <div class="submenu"><a href="#">Sous-Menu 4.2</a></div>
    </div>
  </div>

Il s'agit ici d'une autre partie du corps de la page permettant la mise à jour du menu via l'appel ajax

Code Appel AJAX :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<p>This is an AJAX test page</p>
<a href="#" onclick='xhrSend("barmenu","/cgi-bin/ajax.cgi")'>OnClick link</a>

Jusque là, il s'agit de code classique que j'espère correcte en ayant suivi les différents tutorials.

Je me permets de vous solliciter car mon CGI retourne du code javascript via AJAX et ce dernier n'est pas interprété, le menu est donc inopérant.
Je parle ici de l'event " onclick ".
J'ai pû voir après qques recherches qu'il fallait interpréter le code de retour AJAX via la fonction eval() mais je n'ai pas de tag <script> et j'ai par ailleurs lu aussi qu'il fallait peut-être mieux éviter cette fonction eval().

Comment puis-je faire en sorte que le code de retour soit interprété et que le menu s'exécute correctement ?

Merci de votre aide et pistes

[Damsee]

Pour info, j'ai trouvé, j'ai pû me débrouiller avec la gestion des évènements
et via l'ajout d'une petite fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function addOnClick() {
  var x = document.getElementById("menu3");
  x.addEventListener('click', function(){show('menu3');}, false);
}