Discussion :

[anca2]

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 php :

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

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

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
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 html :

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

<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 html :

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

<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

[andry.aime]

Tant qu'à utiliser jQuery, utilise le pour lancer la requête AJAX. Et pour ton soucie, passe l'url en paramètre de la fonction.

A+.

[anca2]

Bonjour,

Merci pour ta réponse.

Si je mets cela

Code html :

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

<li class="toggleSubMenu"><span><a href="javascript:exemple(\'2\')">Hop 2</a></span>

L'url est ignoré et pour cause la ligne

Code :

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

1
2
3
4
5
6
$("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>') ;
        } ) ;

Elle est donc considérée comme du texte.

Comme je l'ai dis je ne suis pas du tout à l'aise, je ne trouve pas de solution.

Si tu une idée je suis prenneur.

Merci

[andry.aime]

Tu vois bien que tu n'appelles pas une fonction dans ton nouveau lien.
Il est aussi préférable d'écrire:

Code html :

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

<a href="#" onclick="exemple(\'2\'); return false;">

A+.

[anca2]

Bonsoir,

Hé oui c'est ça, je ne voyais pas l'erreur , je suis une truffe, truffe oui! mais du Périgord.

Merci.

Antoine