Discussion :

[arlemcities]

Bonjour,

J'ai un treeview avec des menus cach�s qui marche tr�s bien.

Le probl�me est que quand j'arrive sur la page tout le menu est d�ploy� alors que je souhaiterais ne voir que le 1er niveau par d�fault.
Une id�e?

Merci,

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
38
39
40
41
42
43
 
function afficher_menu($parent, $niveau, $array) {
    $i=0;
    $html = "";
    $niveau_precedent = 0;
 
    if ($niveau%2 == 0) 
        $fa = "fa fa-caret-right";
    else
        $fa = "fa fa-long-arrow-right";
 
    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
    if (!$niveau && !$niveau_precedent) $html .= "\n<ul>\n";
    foreach ($array as $noeud) {
        $idMenu = $noeud['id'];
        if ($parent == $noeud['idParent']) {
            if ($niveau_precedent < $niveau) $html .= "\n<ul style=\"display:block;\">\n";
            $html .= "<li>\n"
            . "<a onclick=\"javascript: showMenu(document.getElementById('menu$i'));\" style=\"cursor:pointer;\"><span class=\"$fa\"></span>" 
            . " " . $noeud['libelle'] 
            . " " . $noeud['id'] 
            . "-" . $noeud['idParent'] . "</a>";
             $niveau_precedent = $niveau;
            $html .= "<span id=\"menu$i\">" . afficher_menu($noeud['id'], ($niveau + 1), $array) . "</span>";
        }
        $i++;
    }
 
    if (($niveau_precedent == $niveau) && ($niveau_precedent != 0)) $html .= "</ul>\n</li>\n";
    else if ($niveau_precedent == $niveau) $html .= "</ul>\n";
    else $html .= "</li>\n";
 
    return $html;
}
?>
 
<script type="text/javascript">
    function showMenu(menu) {
        if (menu.style.display == 'none') menu.style.display = 'block';
        else menu.style.display = 'none';
    }
</script>

[Watilin]

S'il n'y a rien d'autre dans ta page que le code que tu as donn�, c'est normal car il n'y rien qui agit au chargement de la page pour replier le menu.

Je m'�tonne que PHP ne te dise rien � propos de la variable $niveau_precedent. As-tu activ� l'affichage de tous les messages d'erreur ? Si non, ajoute error_reporting(-1); au d�but de ton script PHP.

D'autre part, peux-tu nous montrer un exemple de code HTML g�n�r� par ce script en faisant Ctrl+U dans ton navigateur ?

Astuce : tu n'es pas oblig� de formater ton code HTML avec des "\n" partout qui, � mon avis, rendent le code PHP plus difficile � lire. Utilise l'inspecteur de ton navigateur, dans le menu outils de d�veloppement.

[arlemcities]

Merci de m'avoir r�pondu,

J'ai activ� tous les messages d'erreur et PHP ne m'indique rien sur $niveau_precedent.
Je n'ai pas mis de code pour cacher certaines erreurs ... Bizarre!
Qu'est que je devrais avoir comme erreur?

Je ne peux pas te montrer le code HTML g�n�r� car c'est une appli pour mon travail et je n'ai pas pens� � prendre le code source en rentrant ...

Pour l'instant mon treeview fonctionne tr�s bien, quand je clique sur un menu alors le sous-menu se replie ou se d�plie, ...
Le probl�me c'est que quand tu arrives sur la page, toute l'arborescence est d�pli�e (9niveaux).
Et je souhaiterais voir seulement le premier niveau en arrivant sur la page ...

J'ai essay� de mettre un onload() mais �a ne marche pas ...
Et j'avoue que Javascript ce n'est pas ma tasse de th�!

As-tu une id�e pour replier le menu au chargement de la page?

Merci,

[Watilin]

Non en fait c'est normal qu'il ne dise rien, c'est moi qui d�conne Je croyais que c'�tait une globale.

Pour ton probl�me je dirais qu'il suffit de mettre le style display: none � toutes les <ul> de second niveau. Grossi�rement en JavaScript moderne (garanti non compatible IE6 ), on s'en sort avec un querySelectorAll et un petit forEach et �a donne quelque chose comme �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
Array.prototype.forEach.call(
  document.querySelectorAll("ul ul"),
  function ($ul) {
    $ul.style.display = "none";
  }
);

Le tout dans une fonction onload, bien s�r. (Ou mieux, sur l'�v�nement DOMContentLoaded.)

C'est brutal, �a court-circuite les conventions de ta couche m�tier (s'il y en a), mais tu vois l'id�e

[arlemcities]

Oui j'ai des couches m�tier ... mais quand tu dis �a court-circuite les conventions des couches m�tier, quel est l'impact sur mon application? (temps de chargement, faille de s�curit�, ...)

Pour le code Javascript, faut-il importer la librairie Prototype?
Et par exemple si je ne veux afficher que les 2 premiers niveaux au chargement de la page, est-ce correct de mettre en param�tre querySelectorAll("ul ul ul")?

[Watilin]

Oui j'ai des couches m�tier ... mais quand tu dis �a court-circuite les conventions des couches m�tier, quel est l'impact sur mon application? (temps de chargement, faille de s�curit�, ...)

�a rend juste le code incoh�rent et plus difficile � maintenir. Pour donner un exemple concret, si tu as donn� une classe CSS aux menus repli�s, il vaut mieux leur ajouter cette classe plut�t que leur mettre directement un display: none, pour rester dans les conventions qui ont �t� d�cid�es. De la m�me mani�re; si une fonction JavaScript est pr�vue pour replier les menus (comme ta fonction showMenu � qui devrait peut-�tre plut�t s'appeler toggleMenu), il vaut mieux appeler cette fonction plut�t que r��crire du code �quivalent. Tout �a dans un souci de factoriser le code, c'est-�-dire ne pas coder plusieurs fois la m�me chose. C'est le principe DRY.

Bien entendu s'il y a de la redondance dans ton code, �a augmente la probabilit� d'�crire des bugs, et donc �a peut impacter tout un tas de trucs dont le temps de chargement, la s�curit�, etc. En fait, ce que je voulais dire par � �a court-circuite les conventions de ta couche m�tier �, c'est qu'il faudra sans doute que tu adaptes le code que je t'ai donn� pour qu'il s'int�gre proprement dans le projet.

Pour le code Javascript, faut-il importer la librairie Prototype?

Non. JavaScript est un langage � prototypes, �a veut dire que ses objets sont bas�s sur un prototype et non pas sur une classe. Le framework Prototype a juste repris le nom, mais utiliser un prototype en JS ne signifie pas qu'on a besoin de la biblioth�que Prototype.

Note, quand j'interviens sur un forum JS, je m'efforce de toujours donner du code vanilla, c'est-�-dire sans recourir � un framework (sauf mention contraire). En revanche, j'aime utiliser des fonctionnalit�s r�centes de JavaScript, qui sont normalement pr�sentes dans les versions actuelles de tous les navigateurs ou presque.

Dans le code que j'ai donn�, j'utilise le prototype de Array car je veux utiliser la m�thode forEach, et la collection renvoy�e par querySelectorAll n'a pas de m�thode forEach. Le vrai � truc � dans mon code ce n'est pas le prototype mais la m�thode call.

Pour commencer il faut comprendre le fonctionnement de forEach. Je t'ai donn� un lien vers le MDN dans mon message pr�c�dent. En gros c'est une sorte de boucle for � version fonction �. J'aurais pu utiliser effectivement une boucle for, mais �a aurait �t� moins dr�le

Le probl�me est que :
1^o forEach est une m�thode de tableau (objets construits par Array)
2^o querySelectorAll renvoie des collections qui ressemblent � des tableaux, mais ne sont pas des tableaux. (techniquement, leur constructeur n'est pas Array mais NodeList).

Je me rends compte que je suis en train de redire ce que j'ai �crit sur mon blog, donc sans vouloir faire de l'auto-promotion, je t'invite � lire mon article

Et par exemple si je ne veux afficher que les 2 premiers niveaux au chargement de la page, est-ce correct de mettre en param�tre querySelectorAll("ul ul ul")?

Ouaip ! Encore une fois, les outils de d�veloppement de ton navigateur peuvent t'aider � �crire le bon s�l�cteur. Dans la console, tape querySelectorAll("ul ul ul"), valide avec Entr�e, et tu auras une collection des �l�ments correspondants, qui normalement se mettent en surbrillance quand tu survoles la collection.

[arlemcities]

Bonjour,

J'ai essay� d'apater ton code Javascript mais sans succ�s ...

Fonction pour replier/d�plier le menu:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
function toggleMenu(menu) {
    if (menu.style.display == 'none') menu.style.display = 'block';
    else menu.style.display = 'none';
}

Fonction pour refermer le menu au chargement de la page:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
function loadMenu() {
    Array.prototype.forEach.call(document.querySelectorAll("ul ul"),
        function ($ul) {
            $ul.style.display = "none";
        }
    );
}        
</script>

J'ai mis onload="loadMenu()" sur le body!

Donc au chargement de la page, j'ai bien le menu de repli� mais lorsque je clique dessus mon menu ne se d�plie pas!

Merci de ton aide,

[arlemcities]

Edit:
Quand je clique sur les niveaux pr�c�dents, le toggle marche bien.
Par contre lorsque je clique sur le dernier niveau d'affich�, les niveaux suivants ne se d�plient pas! (jai bien v�rifi� qu'il y avait d'autre niveaux dans la Bdd)

[Watilin]

Salut !
En analysant plus en d�tail ton code, je me suis rendu compte que tu appelais toggleMenu sur des <span> et non pas sur des <ul>. Je t'ai donc induit en erreur, d�sol�.

Le s�lecteur correct serait donc "li > span". Si �a rentre en conflit avec d'autres <span> pr�sents, tu peux rajouer un s�lecteur d'attribut pour v�rifier le d�but de l'id : "li > span[id^='menu']".

�a donnerait ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function loadMenu() {
    Array.prototype.forEach.call(document.querySelectorAll("li > span"),
        function ($span) {
            $span.style.display = "none";
        }
    );
}

Pour la science je te donne la version sans forEach, avec une boucle for classique :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function loadMenu() {
    var spanList = document.querySelectorAll("li > span");
    for (var i = 0, $span; $span = spanList[i]; i++) {
        $span.style.display = "none";
    }
}

[arlemcities]

Merci pour ton aide! Ca marche parfaitement!

[arlemcities]

Bonjour,

J'aurais besoin encore d'un peu d'aide si possible ...

Comme tu as pu le voir dans mon premier code, j'utilise une variable $fa qui renvoie des ic�nes bootstrap selon le niveau dans lequel tu te trouves.
Comme tout menu qui se respecte, je cherche � afficher la m�me variable $fa mais avec des ic�nes diff�rentes lorsque le menu est d�roul�.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
 
if (menu.style.display == 'none'){
        menu.style.display = 'block';
        document.getElementById('plus').style.display = 'block';
        document.getElementById('moins').style.display = 'none';
    }
    else{
        menu.style.display = 'none';
        document.getElementById('plus').style.display = 'none';
        document.getElementById('moins').style.display = 'block';
    }

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
 
$(document).ready(function () {
 
    $('#toggle-view li').click(function () {
 
        var text = $(this).children('div.panel');
 
        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');        
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');        
        }
 
    });
 
});

Voici les 2 codes Javascript que j'ai essqy� mais sans succ�s!

Peux-tu me donner une piste?

Merci beaucoup,

[Watilin]

Bonjour,
quelques messages plus haut je t'avais demand� de me montrer le code HTML g�n�r�. Peux-tu me le donner ?

Si j'en crois ton code PHP, tu as des <span class="fa fa-...">, tu devrais donc �tre en mesure de les s�lectionner avec span.fa. C'est d�j� un d�but d'information. Tape document.querySelectorAll("span.fa") dans ta console et vois si �a peut t'aider � quelque chose.

[arlemcities]

Bonjour,

Voici ce que me renvoie le navigateur:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
<a onclick='javascript: if(1>0) toggleMenu(document.getElementById("menu6"));' style='cursor:pointer;'><span class="fa fa-cog"></span> aaa 3230-1</a><span id="menu6"><ul><li><button type='button' class='btn btn-primary btn-xs'>Options</button>
             <a onclick='javascript: if(2>0) toggleMenu(document.getElementById("menu106"));' style='cursor:pointer;'><span class="fa fa-wrench"></span> aaa 3231-3230</a><span id="menu106"></li></span><li><button type='button' class='btn btn-primary btn-xs'>Options</button>
             <a onclick='javascript: if(2>0) toggleMenu(document.getElementById("menu107"));' style='cursor:pointer;'><span class="fa fa-wrench"></span> bbb 3232-3230</a><span id="menu107"></li></span><li><button type='button' class='btn btn-primary btn-xs'>Options</button>
             <a onclick='javascript: if(2>0) toggleMenu(document.getElementById("menu108"));' style='cursor:pointer;'><span class="fa fa-wrench"></span> ccc 3233-3230</a><span id="menu108"></li></span></ul></li></span></ul></li></span></ul>

Mon id�e �tait de faire un switch sur la variable $fa en jouant sur le display:none/block de la balise <ul> ... Qu'en penses-tu?

Merci,

[Watilin]

Tu sais que JS ne voit pas les variables PHP n'est-ce pas ?

Jouer directement sur le display block/none, ce n'est pas coh�rent, encore une fois, avec les conventions que tu t'es fix�es. C'est justement ta fonction toggleMenu qui g�re le display de la liste, pourquoi n'agirait-elle pas en m�me temps sur le span ?

Au fait, que donne le querySelectorAll que je t'ai demand� de regarder dans mon pr�c�dent message ?

Normalement tu dois pouvoir acc�der au <span class="fa ..."> � partir du <span id="menuXXX">, en utilisant des propri�t�s de navigation dans le DOM telles que previousSibling ou previousElementSibling.

Quelques points � am�liorer dans ton code :

• javascript: est inutile dans un onclick
• les if (1>0) et if (2>0) sont inutiles car leur condition est toujours vraie, tu peux les retirer
• tu peux aussi retirer type='button' sur les balises <button>
• les liens sans href n'ont pas de s�mantique ; c'est pour �a que le curseur ne change pas avec eux, et que tu as �t� oblig� de rajouter style='cursor:pointer'. Tu as deux solutions :
  
  • soit tu rajoutes href="#" sur le lien ainsi que return false � la fin du onclick
  • soit tu ajoutes le style dans une feuille pour �viter de le r�p�ter � chaque fois :
    

    Code css :

    S�lectionner tout - Visualiser dans une fen�tre � part

    a[onclick] { cursor: pointer; }

[arlemcities]

Merci pour l'am�lioration syntaxique de mon code!

Lorsque je tape document.querySelectorAll("span.fa") dans la console, il me renvoie un tableau vide []!?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
 
function toggleMenu(menu) {
    if (menu.style.display == 'none') {
        menu.style.display = 'block';
        Array.prototype.forEach.call(
            document.querySelectorAll("span.fa"),
            function ($span) {$span.style.display = "none";}
        ); 
    } else 
        menu.style.display = 'none';  
}

Quand j'essaie ce code, tous mes span.fa disparaisse au clic. C'est normal avec le display:none mais je ne vois toujours pas comment changer le sens de la fl�che (en sachant que chaque niveau a une fl�che diff�rente)!?

Javascript ce n'est vraiment pas mon truc!!! Malheureusement ...

[Watilin]

Lorsque je tape document.querySelectorAll("span.fa") dans la console, il me renvoie un tableau vide []!?

�a c'est pas normal. Tu utilises une <iframe> ?

[arlemcities]

Non pas du tout.

[arlemcities]

J'ai essay� �a mais toujours pas de r�sultat:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
function toggleIcon(menu) {
    if (menu.style.display == 'none') icon.html('<span class="glyphicon glyphicon-plus"></span>');
    else icon.html('<span class="glyphicon glyphicon-minus"></span>');  
}

Peux-tu encore m'aider?

Merci,

[NoSmoking]

Bonjour,

icon.html('<span class="glyphicon glyphicon-plus"></span>')

tu sorts d'o� cette syntaxe (jquery peut �tre) ?

[Watilin]

Salut,

tu dis pas de r�sultat, mais as-tu un message dans la console ? Parce que je ne vois pas o� la variable icon est d�finie.

Je vois que tu as retir� les classes fa. L'as-tu fait avant de tester document.querySelectorAll("span.fa") dans ta console ? �a expliquerait pourquoi �a n�a pas march�.

Je vois aussi que tu utilises jQuery. Je ne m'en �tais pas rendu compte avant, excuse-moi. Je t'aurais fourni du code plus adapt�.

Mais avant tout, il faut que tu revoies le PHP qui g�n�re tes listes, car il y a des balises qui ne sont pas dans le bon ordre. Tu peux utiliser le validateur pour t'aider, ou simplement regarder le code source (Ctrl+U) et chercher les endroits o� il y a du rouge.