UI Tab en conflit avec greybox

**gauthier_la** · 11/06/2011, 10h51

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 :

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

**danielhagnoul** · 11/06/2011, 21h25

Bonsoir

FAQ jQuery : Où dois-je poser mon $ ?

S'il vous prend l'idée bizarre d'utiliser plus d'une bibliothèque JavaScript en même temps, il faut écrire :

Code :

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

1
2
3
jQuery.noConflict();
 
jQuery(function($){ ... });

Dans votre cas :

Code :

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

1
2
3
4
5
jQuery.noConflict();
 
jQuery(function($) {
	$("#tabs").tabs();
});

**gauthier_la** · 12/06/2011, 11h09

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

**danielhagnoul** · 12/06/2011, 12h06

Bonjour

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

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

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 :

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

**gauthier_la** · 12/06/2011, 13h35

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 :

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

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

**danielhagnoul** · 12/06/2011, 19h28

Bonsoir

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

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

**gauthier_la** · 12/06/2011, 23h31

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 ?

UI Tab en conflit avec greybox

jQuery

Vue hybride

Discussions similaires

Partager

Partager