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

**Dionyzos** · 07/08/2009, 12h18

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 :

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

1
2
3
4
5
6
7
8
9
10
11
<ul id="tree" class="filetree">
    <li><span class="file">Fichier 1</span></li>
    <li><span class="folder">Folder</span>
        <ul>
            <li><span class="file">Fichier 2</span></li>
            <li><span class="file">Fichier 3</span></li>
            <li><span class="file">Fichier 4</span></li>
        </ul>
    </li>
    <li><span class="file">Fichier 5</span></li>
</ul>

Et maintenant le code qui part en vrille :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<ul id="tree" class="filetree">
    <li><span class="file">Fichier 1</span></li>
    <li><span class="folder">Dossier <a class="add" href="javascript:maFonctionAjax();">ajouter</a></span>
        <ul>
            <li><span class="file">Fichier 2</span></li>
            <li><span class="file">Fichier 3</span></li>
            <li><span class="file">Fichier 4</span></li>
        </ul>
    </li>
    <li><span class="file">Fichier 5</span></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

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

Merci.

**Dionyzos** · 12/08/2009, 15h37

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

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

**danielhagnoul** · 13/08/2009, 03h34

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 :

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

return false;

**Dionyzos** · 18/08/2009, 17h08

Merci pour cette piste danielhagnoul, mais lorsque je place

Code :

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

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

**danielhagnoul** · 19/08/2009, 02h37

Bonsoir Dionyzos.

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

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

**Dionyzos** · 19/08/2009, 13h57

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

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

jQuery

Discussions similaires

Partager

Partager