Discussion :

[calogerogigante]

Bonjour,

J'ai besoin d'un tout petit coup de pouce, c'est la raison de mon post.

Je développe un site avec CodeIgniter et Bootstrap.

Pour développer une vue avec des catégories, j'utilise le très joli Easy Tree, fait avec JQuery.
http://jquery-plugins.net/easy-tree-...-and-bootstrap

Aucun soucis pour mettre en place l'arbre, j'ai bien fait les liens avec la table des catégories de ma base de données sqlite3 (en utilisant la méthode intervallaire excellemment bien décrite dans le tutoriel de SQLPRO qu'on trouve sur developpez.com).
Et j'ai pu reconstituer sans soucis mes arbres <ul></ul> imbriqués. L'affichage issu de la BDD est donc impeccable.

Mon soucis, c'est qu'une fois que j'ai mon arbre, je ne vois pas comment je peux faire des liens html.

Mon arbre ressemble à celui de la démo :
http://zgs225.github.io/easy-tree/

Quand j'insère dynamiquement des liens juste à côté du nom de la catégorie (dans les balises <li></li>), ce lien n'est pas cliquable à cause de la présence d'un "javascript:void (0)" qui apparaît quand on clique sur une feuille/nœud.
Or, je ne peux pas enlever ce "javascript: void(0)" sous peine de rendre l'arbre non fonctionnel...

Comment puis-je transformer le clic de sélection de la feuille/nœud en un lien vers un affichage de ce que la catégorie doit afficher ? Du genre : http://www.monsite.com/affichercategorie?id=xxx pour la catégorie xxx.

Je n'ai pas assez d'aisance en javascript pour résoudre ce problème dans les sources même de Easy Tree.

Je pense que je dois modifier quelque chose dans ce fichier, même un truc simple, mais je ne vois pas quoi :
https://github.com/zgs225/easy-tree/...rc/easyTree.js

D'où ma demande de coup de pouce...

Merci d'avance.

[calogerogigante]

Voici un exemple concret du soucis...

http://www.gigante.be/mmhh/

Inspectez la source : on y voit l'arbre correctement reconstitué avec mes catégories.

A chaque élément de l'arbre, dans les balises <li></li>, j'ai pourtant inclus un même lien vers une page de test qui existe bel et bien :
http://www.gigante.be/mmhh/page/affichagetest

Cette page de test est normalement joignable, mais pas moyen d'y accéder en cliquant depuis un des nœuds/feuilles de l'arbre...

C'est con, mais si je ne résous pas ce problème, hé bien je peux dire adieu à ce bel arbre javascript qui pourtant convenait à merveille à mon projet.

Merci d'avance si quelqu'un a une piste...

[NoSmoking]

Bonjour,
pas sûr que tu ai opté pour le plus approprié à ton besoin et ce compte tenu de la longueur de ta liste, mais c'est une remarque très personnelle.

A la lecture du code source il s'avère que ton lien est mort né, le script ne prenant que le textContent du <li> et non le innerHTML, cela se passe à partir de la ligne 45 de ta source.

Code :

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

1
2
3
4
5
6
7
8
9
if($(this).is('li:has(ul)')) { // ligne 45
    var children = $(this).find(' > ul');
    $(children).remove();
    text = $(this).text();
    $(this).html('<span><span class="glyphicon"></span><a href="javascript: void(0);"></a> </span>');
    $(this).find(' > span > span').addClass('glyphicon-folder-open');
    $(this).find(' > span > a').text(text);
    $(this).append(children);
}

Il te faut donc modifier cela pour prendre en compte le html().

Je te propose en remplacement de ce bout de code le code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
if($(this).is('li:has(ul)')) { // ligne 45
    var children = $(this).find(' > ul');
    $(children).remove();
    var html = $(this).html();
    $(this).html('<span><span class="glyphicon"></span></span>');
    $(this).find(' > span > span').addClass('glyphicon-folder-open');
    $(this).find(' > span > span').html(html);
    $(this).append(children);
}

Pas regardé plus avant si des problèmes peuvent surgir.

[calogerogigante]

Magnifique !

Ça marche...

C'est exactement le coup de pouce dont j'avais besoin.

En effet, en changeant toutes les fonctions _.text() en fonction _.html(), les liens générés via le contrôleur de CodeIgniter s'affichent ensuite correctement, et sont cliquable comme il faut.

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
            $.each($(easyTree).find('ul > li'), function()   // LIGNE 42
            {
                var text;
                if($(this).is('li:has(ul)')) {
                    var children = $(this).find(' > ul');
                    $(children).remove();
                    text = $(this).html();
                    $(this).html('<span><span class="glyphicon"></span><a href="javascript: void(0);"></a> </span>');
                    $(this).find(' > span > span').addClass('glyphicon-folder-open');
                    $(this).find(' > span > a').html(text);
                    $(this).append(children);
                }
                else {
                    text = $(this).html();
                    $(this).html('<span><span class="glyphicon"></span><a href="javascript: void(0);"></a> </span>');
                    $(this).find(' > span > span').addClass('glyphicon-file');
                    $(this).find(' > span > a').html(text);
                }
            });

Je te remercie vraiment beaucoup NoSmoking. Je peux continuer mon projet avec EasyTree...
Developpez est toujours au top de l'entraide à ce que je vois, et c'est génial ! Faudra que je me mette un peu plus à Javascript quand même, pour résoudre ce genre de problème à l'avenir tout seul...

Calo