Menu avec jQuery et appel Ajax
Bonjour,
j'ai un menu sous jq (jquery-1.6.3.min.js) et une partie js et autre css.
code menu partie HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| $aff_menu_jq='
<ul id="navigation">
<li class="toggleSubMenu"><span>L\'ASSOCIATION </span>
<ul class="subMenu '.$open_2.'">
<li><a href="'.$_SERVER['PHP_SELF'].'?saut=1000&open=2"><b>- Adhésion</b></a></li>
<li>'.$categorie_0_TT_html.'</li>
</ul>
</li>
<li>'.$categorie_1_TT_html.'</li>
<li class="toggleSubMenu"><span>L\'Annuaire</span>
<ul class="subMenu '.$open_1.'">
<li><a href="admin_public/index_aut.php?open=1">- S\'Authentifier</a></li>
<li><a href="'.$_SERVER['PHP_SELF'].'?saut=15&open=1">- Passe perdu !!</a></li>
<li class="SS_m">S\'inscrire</li>
<li><a href="'.$_SERVER['PHP_SELF'].'?saut=1&open=1">- Elève </a></li>
<li><a href="'.$_SERVER['PHP_SELF'].'?saut=11&open=1">- Professeur</b> </a></li>
<li><a href="'.$_SERVER['PHP_SELF'].'?saut=13&open=1">- Personnel(le)<br /> - Ami(e) </a></li>
<li class="SS_m"> Ajouter </li>
<li class="fin"><a href="'.$_SERVER['PHP_SELF'].'?saut=1.1&open=1"> <b>- Photo classe</b> </a></li>
</ul>
</li>
<li class="toggleSubMenu open"><span>L\'ELM</span>
<ul class="subMenu '.$open_3.'">
<li>'.$categorie_3_TT_html.'</li>
</ul>
</li>
<li><a href="'.$_SERVER['PHP_SELF'].'?saut=1020">NOUS ECRIRE</a></li>
<li><a href="'.$_SERVER['PHP_SELF'].'?saut=remarque">LIVRE D\'OR</a></li>
<li class="toggleSubMenu open"><span>LES PLUS</span>
<ul class="subMenu ">
<li><a href="../qcm/index_qcm.php">- Les QCM</a></li>
</ul>
</li>
<li>'.$categorie_2_TT_html.'</li>
</ul>
'; |
code partie js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| $(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("ul.subMenu:not('.open_at_load')").hide();
// On selectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'element span qu'ils contiennent par un lien :
$("li.toggleSubMenu span").each( function ()
{
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
} ) ;
// On modifie l'evenement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$("li.toggleSubMenu > a").click( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ; |
cela fonctionne très bien mais... je voudrai lorsque l'on clique sur le titre du sous menu une page s'affiche (ajax) et le sous menu se déroule.
la fonction js ajax
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| function exemple(js_code)
{
obj = document.getElementById(js_code);
// ON EFFACE LE CONTENU DU DUV
obj.innerHTML = "";
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
// CONTROLE DE L'ETAT DE LA REQUETE
// CHAQUE CHANGEMENT D'ETAT AFFICHE UNE LIGNE DANS NOTRE DIV
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 1)
obj.innerHTML += "connexion établie<br />";
if(xhr_object.readyState == 2)
obj.innerHTML+= "requête reçue<br />";
if(xhr_object.readyState == 3)
obj.innerHTML += "réponse en cours<br />";
if(xhr_object.readyState == 4)
{
// ON CONTROLE LE STATUS (ERREUR 404, ETC)
if(xhr_object.status == 200)
obj.innerHTML += "Fichier : " + xhr_object.responseText;
else
obj.innerHTML +="Error code " + xhr_object.status;
}
};
//alert(js_code);
// ON APPELLE LA PAGE
xhr_object.open("GET", "ajax_test.php?saut="+js_code, true);
xhr_object.send(null);
} |
l'appel de la fonction ci-dessous
Code:
<a href="javascript:exemple('2')">ajax</a>
La valeur nmérique permet d'ouvrir la bonne page suivant le titre
La fonction fonctionne lorqu'elle est seul.
Je voudrai mettre l'appel les lignes des titres des sous menu
Ex Ici:
Code:
<li class="toggleSubMenu"><span>L\'Annuaire</span>
Comme cela en ouvrant le sous menu une page d'explication s'ouvre aussi.
Et là !!!!! je galère.
C'est possible?
Je ne suis pas du tout à l'aise en js ou ajax.
Lien http://www.elmlesanciens.fr
Merci pour votre aide
Antoine
