Treeview Javascript PHP / Affichage par défault

Version imprimable

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:

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>

04/09/2015, 18h24
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.
04/09/2015, 20h14
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,
05/09/2015, 01h12
Watilin
Non en fait c'est normal qu'il ne dise rien, c'est moi qui déconne :whistle: 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 :P), on s'en sort avec un querySelectorAll et un petit forEach et ça donne quelque chose comme ça :
Code:

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 ;)
05/09/2015, 11h37
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")?
05/09/2015, 17h42
Watilin

Citation:

Envoyé par 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é, ...)

Ç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.

Citation:

Envoyé par arlemcities

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

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 ;)

Citation:

Envoyé par arlemcities

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.

Bonjour,

J'ai essayé d'apater ton code Javascript mais sans succès ... :(

Fonction pour replier/déplier le menu:
Code:

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:

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,

07/09/2015, 12h27
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)
07/09/2015, 23h44
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:

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:

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"; } }
08/09/2015, 23h53
arlemcities

Merci pour ton aide! Ca marche parfaitement!

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:

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:

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,

09/09/2015, 12h58
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.

Bonjour,

Voici ce que me renvoie le navigateur:

Code:

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,

10/09/2015, 12h29
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:
    
    a[onclick] { cursor: pointer; }

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:

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

10/09/2015, 17h34
Watilin

Citation:

Envoyé par arlemcities

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> ?
10/09/2015, 18h03
arlemcities

Non pas du tout.

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

Code:

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,

14/09/2015, 19h40
NoSmoking

Bonjour,

Citation:

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

tu sorts d'où cette syntaxe (jquery peut être) ?
14/09/2015, 20h41
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.
15/09/2015, 20h57
NoSmoking

Citation:

Envoyé par NoSmoking

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

:oops: je n'avais pas vu le 2^éme code de ton post #11, dans ce cas autant utiliser jQuery pour le reste également.

Autre chose plutôt que de modifier le contenu de tes éléments "icon" il serait plus aisé de gérer cela par une modification de la classe CSS.