[AJAX] Gestion et exécution d'évènements JS dans réponse AJAX
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:
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:
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:
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 :)
