UI Tabs, je souhaiterais rafraîchir le contenu [Résolu]

drmad51 · 23/03/2011, 15h44

Bonjour à tous,

Je souhaiterais rafraîchir le contenu d'un UI tabs via un bouton intitulé "Refresh". Vu que j'avais un problème avec la fonction "load", en guise de test, je me suis rabattu sur une fonction simple : obtenir l'index du tab actif dans la console de firebug. Et là, j'ai toujours une erreur $("#tabs").tabs() is not a function sur la ligne var $tabs = $("#tabs").tabs();. J'ai la même erreur avec la fonction "load" si je la décommente. J'ai l'impression de passer à côté d'un truc flagrant, mais je sèche.
Je transmet mon code ci dessous :

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
<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="./common/jquery/themes/custom-theme/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css"/>
    <script src="./common/jquery/jquery-1.5.1.min.js"></script>
    <script src="./common/jquery/jquery-ui-1.8.10.custom.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#tabs").tabs({cache:true,spinner:"Chargement..."});
            console.log($("#tabs").tabs());
            $("#testload").click(function() {
                //$("#tabs").tabs("load",1);
                console.log($("#tabs"));
                var $tabs = $("#tabs").tabs();
                var $selected = $tabs.tabs("option", "selected");
                console.log($selected);
            });
        });
    </script>
    </head>
 
    <body>
        <input id="testload" type="button" value="Refresh"/>
        <input name="Params" type="button" onClick="window.open('./params/lparams.php','mainFrame')" value="Param&egrave;tres" />
        <div id="tabs">
            <ul>
                <li><a href="lclient.php"><span>Clients</span></a></li>
                <li><a href="lfournisseur.php"><span>Fournisseurs</span></a></li>
            </ul>
        </div>
    </body>
</html>

Merci d'avance pour vos commentaires éclairés.

nadox · 24/03/2011, 11h50

Je n'ai pas de problèmes en utilisant les fichiers JS/CSS de la démo.
Je crois que le problème vient de ta version customisée de jQuery ou jQuery UI.

Voici mon code de test :

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
 
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
	<meta charset="utf-8">
 
	<title>jQuery UI Tabs - Default functionality</title>
 
	<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
 
	<script src="http://jqueryui.com/jquery-1.5.1.js"></script>
 
	<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
 
	<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
 
 
 
	<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
 
	<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
 
    <script>
 
        $(document).ready(function(){
 
            $("#tabs").tabs({cache:true,spinner:"Chargement..."});
 
            console.log($("#tabs").tabs());
 
            $("#testload").click(function() {
 
                $("#tabs").tabs("load",1);
 
                console.log($("#tabs"));
 
                var $tabs = $("#tabs").tabs();
 
                var $selected = $tabs.tabs("option", "selected");
 
                console.log($selected);
 
            });
 
        });
 
    </script>
 
    </head>
 
 
 
    <body>
 
        <input id="testload" type="button" value="Refresh"/>
 
        <input name="Params" type="button" onClick="window.open('./params/lparams.php','mainFrame')" value="Param&egrave;tres" />
 
        <div id="tabs">
 
            <ul>
 
                <li><a href="lclient.php"><span>Clients</span></a></li>
 
                <li><a href="lfournisseur.php"><span>Fournisseurs</span></a></li>
 
            </ul>
 
        </div>
 
    </body>
 
 
 
</body>
 
</html>

drmad51 · 24/03/2011, 14h29

Bonjour nadox,

Merci pour ta réponse. Elle m'a éclairé en ce sens que j'ai repris ton code et que j'avais toujours le même problème. Cela m'a permis de me rendre compte que la source du problème était dans les fichiers lclient.php et lfournisseur.php qui contiennent un treeview jquery (plugin). Pour résoudre le problème, j'ai intégré le script jquery.ui dans ces pages et cela fonctionne correctement.

24/03/2011, 14h29	#3
drmad51 Invité de passage Inscription : septembre 2009 Messages : 2 Détails du profil Informations personnelles : Âge : 37 Informations forums : Inscription : septembre 2009 Messages : 2 Points : 1 Points : 1	Bonjour nadox, Merci pour ta réponse. Elle m'a éclairé en ce sens que j'ai repris ton code et que j'avais toujours le même problème. Cela m'a permis de me rendre compte que la source du problème était dans les fichiers lclient.php et lfournisseur.php qui contiennent un treeview jquery (plugin). Pour résoudre le problème, j'ai intégré le script jquery.ui dans ces pages et cela fonctionne correctement.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email