Incompatibilité jQuery & Mootools

**templari** · 18/04/2011, 00h29

Bonjour,

j'ai un problème d'incompatibilité entre jQuery et Mootools...

En effet, lorsque j'exécute le code suivant (avec jquery) :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
	<script type="text/javascript" src="javascripts/jquery.js"></script>
   <script type="text/javascript" src="javascripts/prototype.js"></script>
   <script type="text/javascript" src="javascripts/scriptaculous.js"></script>
 
   <script type="text/javascript">
    function GrowEffect(elem)
    {
        var oElem = document.getElementById(elem) || elem; 
        Effect.Grow(oElem,{duration:0.4,fps:25,direction:center,from:0.0,to:1.0});
    }
   </script>
</head>
<body onload="Effect.Grow($('corpus1'));">
<div id="corpus_container">
    <div id="corpus1" style="display:none;">
        <div id="corpus_content">
        <a href="http://www.casimages.com/img.php?i=110412021409181346.jpg" target="_blank" title="upload image"><img src="http://nsa26.casimages.com/img/2011/04/12/mini_110412021409181346.jpg" border="0" alt="Hebergement gratuit d'image et photo"/></a></a>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
        </div>
    </div>
</div>
</body>
</html>

Pas de problème.

Aussi, lorsque j'exécute celui-là avec mootools :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Slideshow Test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/slideshow.css">
	<script src="javascripts/mootools-1.3.1-core.js"></script>
	<script src="javascripts/mootools-1.3.1.1-more.js"></script>
	<script src="javascripts/slideshow.js"></script>
	<script>
		window.addEvent('domready', function(){
			var data = { '1.jpg': { caption: '' }, '2.jpg': { caption: '' }, '3.jpg': { caption: '' }, '4.jpg': { caption: '' }};
 
			new Slideshow('noOverlap', data, { height: 300, hu: 'images/', overlap: false, resize: 'fit', width: 400 });
 
		});
	</script>
</head>
<body>
 
 
	<div id="noOverlap" class="slideshow">
		<img src="images/1.jpg" alt="1">
	</div>
 
</body>
</html>

Pas de problème non plus.

Par contre, lorsque je souhaite assembler les deux... jquery/mootools :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Slideshow Test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/slideshow.css">
	<script src="javascripts/mootools-1.3.1-core.js"></script>
	<script src="javascripts/mootools-1.3.1.1-more.js"></script>
	<script src="javascripts/slideshow.js"></script>
      <script type="text/javascript" src="javascripts/jquery.js"></script>
      <script type="text/javascript" src="javascripts/prototype.js"></script>
      <script type="text/javascript" src="javascripts/scriptaculous.js"></script>
	<script>
		window.addEvent('domready', function(){
			var data = { '1.jpg': { caption: '' }, '2.jpg': { caption: '' }, '3.jpg': { caption: '' }, '4.jpg': { caption: '' }};
 
			new Slideshow('noOverlap', data, { height: 300, hu: 'images/', overlap: false, resize: 'fit', width: 400 });
 
		});
	</script>
<script type="text/javascript">
    function GrowEffect(elem)
    {
        var oElem = document.getElementById(elem) || elem; 
        Effect.Grow(oElem,{duration:0.4,fps:25,direction:center,from:0.0,to:1.0});
    }
   </script>
</head>
<body>
<body onload="Effect.Grow($('corpus1'));">
<div id="corpus_container">	
 
	<div id="noOverlap" class="slideshow">
		<img src="images/1.jpg" alt="1">
	</div>
 <div id="corpus1" style="display:none;">
        <div id="corpus_content">
        </div>
    </div>
</div>
</body>
</html>

Là, plus rien ne fonctionne...

Je me suis penché sur la question toute la soirée, apparemment, il y a un "problème d'incompatibilité" entre les différentes librairies JS...

Alors, j'ai vu que certains initialisaient les variables de jQuery à $j au lieu de $ pour que $ ne soit pas interprété par les deux librairies mais que par mootools, mais... j'ai essayé, et cela n'a pas fonctionné...

Une idée ???

Merci.

**Bovino** · 18/04/2011, 08h17

Code :

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

1
2
3
4
5
6
<script src="javascripts/mootools-1.3.1-core.js"></script>
	<script src="javascripts/mootools-1.3.1.1-more.js"></script>
	<script src="javascripts/slideshow.js"></script>
      <script type="text/javascript" src="javascripts/jquery.js"></script>
      <script type="text/javascript" src="javascripts/prototype.js"></script>
      <script type="text/javascript" src="javascripts/scriptaculous.js"></script>

Il te manque encore quelques frameworks à intégrer si tu veux : Dojo, YUI, Ext parce que là, il semble que tu m'encombres pas assez ta page

Sinon, pour $j, il suffit de lire la doc : Using jQuery with Other Libraries

**bigboomshakala** · 18/04/2011, 17h47

Envoyé par Bovino

Il te manque encore quelques frameworks à intégrer si tu veux : Dojo, YUI, Ext parce que là, il semble que tu m'encombres pas assez ta page

+1 c'est abusé

**templari** · 18/04/2011, 18h36

Envoyé par bigboomshakala

+1 c'est abusé

-1 : temps perdu, mieux fait d'expliquer "pourquoi" il n'est pas souhaitable de faire ainsi et "que faire" lorsqu'on à besoin des deux sur une seule page (technique $j ok, mais j'entend "globalement", vous feriez comment ? vous ne les invoqueriez pas dans la head ..?).

bref, commentaires inutiles. triste pour des "rédacteurs".

**Bovino** · 18/04/2011, 18h53

Tout simplement parce qu'utiliser un framework implique (normalement) d'adapter ses scripts à la logique du framework, ce qui devient difficilement possible quand tu en utilises 3 différents.
Ensuite, il est rare qu'un framework dispose d'une fonctionnalité qu'on ne retrouve pas chez les autres (peu ou prou), du coup, la technique qui consiste à se dire "Oh, belle fonctionnalité, je vais donc ajouter ce framework aux autres" est à la base une erreur.
D'autre part, la plupart des frameworks utilisent des noms de méthodes communs (à commencer par $), donc cumuler les appels de frameworks implique ecraser certaines méthodes des précédents.
Enfin, utiliser 3 frameworks différents et utiliser dans son code getElementById pour un effet Grow démontre que tu ne t'es même pas intéressé au fonctionnement de ce que tu mets dans ta page.

D'où la remarque "C'est abusé"

**bigboomshakala** · 18/04/2011, 19h57

J'avais pas le temps de développer, j'allais partir...
Pas mieux que Bovino, j'allais parler des conflits de nommage et de l'inutilité de plusieurs framework dans l'exemple montré (peut-être n'est-ce qu'un morceau d'un grand tout qui justifie l'utilisation de plusieurs frameworks?)

argument supplémentaire : embarquer plusieurs framework = potentiellement un paquet de fichiers qui pèse (en ko) sur la fluidité de la page pour pas forcément grand chose (utilisation d'1% des fonctionnalités disponibles?)

plusieurs discussions sur le forum parlent de cette problématique des framework. meme si on n'en utilise qu'un, il faut le faire quand c'est utile. pour une petite fonctionnalité on peut soir la faire soi-même, soit l'extraire d'un framework (attention au droit d'auteur

)

Edit : sinon le rédacteur, il parle des conflits de noms dans l'un de ses articles js. je ne voulais pas te paraitre insultant avec ma remarque, je n'ai fait qu'exprimer trop brièvement ma surprise

Incompatibilité jQuery & Mootools

JavaScript

Discussions similaires

Partager

Partager