UI Tab en conflit avec greybox

Version imprimable

Bonjour,

Je n'arrive pas à faire fonctionner les tab jQuery lorsque ma page inclut la librairie AJS.js de greybox.
C'est donc apparemment un conflit de librairies, mais même en utilisant le noConflict de jquery et en remplaçant les $ par jQuery, la navigation entre tabs reste impossible. Le problème se pose de façon identique sous firefox et IE.
Quelqu'un a une idée ?

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
 
<link type="text/css" href="jquery/css/smoothness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
 
 
 
<script type="text/javascript">
var GB_ROOT_DIR = "http://127.0.0.1/Misc/greybox/"; 
</script>
<script type="text/javascript" src="Misc/greybox/AJS.js"></script>
<script type="text/javascript" src="Misc/greybox/gb_scripts.js"></script>
 
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.13.custom.min.js"></script>
 
 
<script type="text/javascript">
 jQuery.noConflict();
 
jQuery(function() {
	jQuery("#tabs").tabs();
});
</script>
 
</head>
<body>
 
<div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Nunc tincidunt</a></li>
                    <li><a href="#tabs-2">Proin dolor</a></li>
                    <li><a href="#tabs-3">Aenean lacinia</a></li>
                </ul>
                <div id="tabs-1">tab 1</div>
                <div id="tabs-2">tab 2</div>
                <div id="tabs-3">tab 3</div>
</div>
</body>

11/06/2011, 21h25
danielhagnoul
Bonsoir

FAQ jQuery : Où dois-je poser mon $ ?
Citation:
S'il vous prend l'idée bizarre d'utiliser plus d'une bibliothèque JavaScript en même temps, il faut écrire :

Code:

1 2 3 jQuery.noConflict(); jQuery(function($){ ... });
Dans votre cas :
Code:

1 2 3 4 5 jQuery.noConflict(); jQuery(function($) { $("#tabs").tabs(); });
12/06/2011, 11h09
gauthier_la

Ca ne marche pas, ai-je loupé quelque chose ?

1er lien (KO) avec la methode suggérée:
http://campeana.x10.mx/test_ko.php

2ème lien (OK) sans la librairie AJS.js :
http://campeana.x10.mx/test_ok.php
12/06/2011, 12h06
danielhagnoul

Bonjour

Ce n'est pas un problème jQuery. Chrome signale des erreurs !

Pour http://campeana.x10.mx/test_ok.php :

Citation:

Failed to load resource: the server responded with a status of 404 (Not Found) stylesheet.css

Uncaught ReferenceError: AJS is not defined gb_scripts.js:1

Pour http://campeana.x10.mx/test_ko.php :

Citation:

Failed to load resource: the server responded with a status of 404 (Not Found) stylesheet.css

Uncaught TypeError: Object function (elm) {
return elm.nodeName.toLowerCase();
} has no method 'toLowerCase' jquery-1.5.1.min.js:16

indicator.gi fFailed to load resource
g_close.gif Failed to load resource
w_close.gif Failed to load resource
header_bg.gif Failed to load resource
12/06/2011, 13h35
gauthier_la
C'est bien un problème jQuery, les erreurs signalées par chrome sur test_ok sont marginales
J'ai nettoyé le code.
test_ko ne marche toujours pas et chrome fait bien référence à un problème jquery: jquery-1.5.1.min.js:16

Le delta entre test_ok et test_ko porte sur ces 2 lignes:
Code:

1 2 3 <script type="text/javascript" src="Misc/greybox/AJS.js"></script> <script type="text/javascript" src="Misc/greybox/gb_scripts.js"></script>
C'est AJS.js qui pose le problème de compatibilité.

Bonsoir

Je vous suggère d'essayer en modifiant l'ordre d'insertion des scripts :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery conflict</title>
<link href="Misc/greybox/gb_styles.css" rel="stylesheet" type="text/css">
<link type="text/css" href="jquery/css/smoothness/jquery-ui-1.8.13.custom.css" rel="stylesheet">
<script type="text/javascript">
var GB_ROOT_DIR = "http://127.0.0.1/Misc/greybox/"; 
</script>
<script type="text/javascript" src="Misc/greybox/AJS.js"></script>
<script type="text/javascript" src="Misc/greybox/gb_scripts.js"></script>
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
 
jQuery(function($) {
	$("#tabs").tabs();
});
</script>

Pour jQuery, la dernière version est 1.6.1.

12/06/2011, 23h31
gauthier_la

Même en utilisant la 1.6.1 et en inversant l'ordre des librairies, rien n'y fait.
Jugez-en par vous-même:
http://campeana.x10.mx/test_ko.php

Est-il vraiment saugrenu d'utiliser greybox et jquery ?
Sauriez-vous recommander un équivalent de greybox basé sur une lib jquery ?
13/06/2011, 16h40
gauthier_la

J'ai migré de greybox vers colorbox. Colorbox propose les mêmes fonctionnalités et est basé sur Jquery, donc plus de problème de compatibilité.
Merci pour le coup de main quand même :-)