[Treeview] Ajouter des balises A dans les SPAN fait buguer

Version imprimable

Bonjour,

J'utilise le plugin jQuery Treeview dans un de mes projets.
Au départ je l'ai mis en place avec uniquement le texte des fichiers et dossiers dans la structure en UL/LI, et aucun soucis, le dé-pliement/repliement des nœuds se passait bien.

Ensuite j'ai voulu intégré des balise <A> dans les SPANs des dossiers pour pouvoir lancer certaines actions en AJAX, et là le dé-pliement des dossiers part en cacahouète :(
Lorsque je clique sur un dossier pour l'ouvrir, il s'ouvre et se referme aussitôt. C'est ballot :?

Voici le code classique qui fonctionne bien :
Code:

1 2 3 4 5 6 7 8 9 10 11 <ul id="tree" class="filetree"> <li>Fichier 1</li> <li>Folder <ul> <li>Fichier 2</li> <li>Fichier 3</li> <li>Fichier 4</li> </ul> </li> <li>Fichier 5</li> </ul>
Et maintenant le code qui part en vrille :
Code:

1 2 3 4 5 6 7 8 9 10 11 <ul id="tree" class="filetree"> <li>Fichier 1</li> <li>Dossier <a class="add" href="javascript:maFonctionAjax();">ajouter</a> <ul> <li>Fichier 2</li> <li>Fichier 3</li> <li>Fichier 4</li> </ul> </li> <li>Fichier 5</li> </ul>
J'ai l'impression que le problème vient du fait que l'action 'click()' de mon lien dans le LI/SPAN est en conflit avec celle du LI>SPAN dans Treeview, mais je sais pas comment empêcher le bug :calim2:

Si quelqu'un à une solution, ou même une piste, je suis preneur :)

Merci.

12/08/2009, 15h37
Dionyzos

Bon, comme je constate que mon sujet passionne les foules, je vais apporter quelques précisions :P

Mon objectif est de ne pas déclencher le click() du LI>SPAN (celui qui replie/déplie le dossier) lorsque je clique sur la balise <a> que j'ai ajouté.

J'ai essayé de la sortir du SPAN mais en la laissant tout de même dans le LI, et cela à pour effet de désactiver le click() par défaut du repli/dépli :(

Donc je n'ai toujours pas trouvé la solution :?
13/08/2009, 03h34
danielhagnoul

Bonsoir...bonjour (2 h 35).

Vous ne donnez pas le code de maFonctionAjax().

Pour éviter la propagation des événements il doit se terminer par :

Code:

return false;
18/08/2009, 17h08
Dionyzos

Merci pour cette piste danielhagnoul, mais lorsque je place

Code:

return false;

à la fin de maFonctionAjax(), la page est redirigée vers une page blanche avec écrit en haut false :(

Donc ca ne règle pas mon problème malheureusement :cry:

Bonsoir Dionyzos.

Voici un exemple, qui fonctionne chez moi sur F3, C2 et IE8 :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="jquery.treeview.css" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="lib/jquery.cookie.js"></script>
    <script type="text/javascript" src="jquery.treeview.min.js"></script>
    <script type="text/javascript">
        function maFonctionAjax(obj){
            $(obj).parent().html("<span style='color:red; font-size:2em;'>Dossier top secret, à lire d'urgence !</span>");
        }
 
        $(document).ready(function(){
            $("#browser").treeview();
 
            $("a.add").click(function(){
                maFonctionAjax(this);
 
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
 
        <ul id="browser" class="filetree treeview-famfamfam">
            <li>
                <span class="folder">Folder 1</span>
                <ul>
                    <li>
                        <span class="folder">Item 1.1</span>
                        <ul>
                            <li><span class="file">Item 1.1.1</span></li>
                        </ul>
                    </li>
                    <li>
                        <span class="folder">Folder 2 <a class="add">ajouter</a></span>
                        <ul>
                            <li>
                                <span class="folder">Subfolder 2.1</span>
                                <ul id="folder21">
                                    <li><span class="file">File 2.1.1</span></li>
                                    <li><span class="file">File 2.1.2</span></li>
                                </ul>
                            </li>
                            <li>
                                <span class="folder">Subfolder 2.2</span>
                                <ul>
                                    <li><span class="file">File 2.2.1</span></li>
                                    <li><span class="file">File 2.2.2</span></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="closed">
                        <span class="folder">Folder 3 (closed at start)</span>
                        <ul>
                            <li><span class="file">File 3.1</span></li>
                        </ul>
                    </li>
                    <li><span class="file">File 4</span></li>
                </ul>
            </li>
        </ul>
 
        <div id="affiche"></div>
    </div>
</body>
</html>

19/08/2009, 13h57
Dionyzos

Merci encore à toi danielhagnoul, c'est en effet cette méthode que j'ai utilisé pour que ca fonctionne.

En gros il ne faut pas que la fonction soit appelée directement dans le href ou le onClick de la balise HTML <a>, mais dans le code JS pour que le return false soit bien interprété.

Merci :)