Discussion :

[andyroddick]

Bonjour,

Je m'explique je souhaite réaliser un site avec l'insertion de plusieurs pages .js, j'ai donc fait les tests de mes différents code javascript dans deux pages différentes et les deux applications fonctionnent correctement. Mais lorsque je fais appelle aux deux applications dans la même page il y a qu'une seule de mes application qui est exécuté.


Personnellement j'ai fais des recherche sur internet à ce sujet mais je n'ai trouvé que l'utilisation de la fonction "addLoadEvent" mais que soit je n'arrive pas à utiliser correctement soit elle ne marche pas pour ce type de problème.

Je ne vais pas vous faire écrire un charabia mais comme tout le monde je débute et je connais beaucoup d'autre langage mais pas trop le javascript.

Je vous poste une partie de mon code:

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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="Photo/Animation/mootools-1.2-core.js"></script> 
<script type="text/javascript" src="Photo/Animation/_class.noobSlide.packed.js"></script>
 
<script type="text/javascript">
	window.addEvent('domready',function(){
		var info6 = $('box6').getNext().set('opacity',0);
		var nS6 = new noobSlide({
			mode: 'vertical',
			box: $('box6'),
			items: '',
			size: 180,
			handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
			handle_event: 'mouseenter',
 
			fxOptions: {
				duration: 1000,
				transition: Fx.Transitions.Back.easeOut,
				wait: false
			},
		});
		nS6.next();
	});
	$(document).ready(function()
	{
		$("#secondpane p.menu_head").mouseover(function()
	    {
		     $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("normal");
	         $(this).siblings().css({backgroundImage:"url(left.png)"});
		});
	});
</script>

Suivant l'ordre d'appelle de mes pages javascript c'est soit l'une ou soit l'autre qui fonctionne mais les deux applications ne fonctionne jamais en même temps.

Merci de vos réponses et je souhaite une bonne journée à tous le monde.

Yo

[vermine]

Bonjour,

Il n'est peut-être pas recommandé de jouer avec plusieurs Framework en même temps. Ils ont parfois des noms identiques pour leurs objets et donc seul la dernière définition de ce "nom" là sera prise en compte. A mon sens, c'est ce qu'il se passe. Surtout quand je vois le selecteur "$".

[andyroddick]

Lut Vermine,

Donc si je comprends bien dans une page on ne peut pas mettre plusieurs code javascript?

Car il risque d'y avoir une confusion au niveau des variables.

Ou y aurait-il moyen de faire en sorte que cela passe autrement?

Yo

[SpaceFrog]

soit une confusion de variable ou un plantage dans le script...

Donc si je comprends bien dans une page on ne peut pas mettre plusieurs code javascript?

Ben heu si ... mais si il y a des noms de variables globales communs les script vont interférer.
D'ou l'utiliser lorsque l'on code des librairies d'utiliser les namespaces

[andyroddick]

Merci de vos réponse, mais cela ne résout pas le problème rencontré au niveau de mes applications, à moins que je supprime l'une des deux pour la remplacer par une autre.

Yo

[SeThYy]

Il est TRES mauvais d'utiliser Mootools et jQuery sur la même page...

[SpaceFrog]

Jquery le permet, mais il y a une manip a faire niveau Jquery ...

[SeThYy]

T'es pas à l'abri d'une incompatibilité, et la page est deux fois plus lourde.

[Watilin]

Salut andyroddick,
je ne connais pas MooTools mais je vois dans ton code que cette bibliothèque utilise le symbole $.

Voilà ce qui se passe :
– au moment où tu déclares jQuery, elle définit une fonction $
– puis tu déclares MooTools, qui écrase la définition de jQuery
– quand tu utilises $ dans ton propre script, tu crois utiliser celui de jQuery, alors que c’est celui de MooTools => Conflit !

Heureusement, jQuery est partageuse. Il suffit de la déclarer après MooTools, et de rajouter cette instruction au début de ton propre script :

Code :

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

jQuery.noConflict();

Après ça, tu peux utiliser le $ pour MooTools, et jQuery pour jQuery.
Par exemple :

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
 
// code MooTools
window.addEvent('domready',function(){
	var info6 = $('box6').getNext().set('opacity',0);
	// …
});
 
// code jQuery
jQuery(document).ready(function()
{
	jQuery("#secondpane p.menu_head").mouseover(function()
	{
		// …
	});
});

[SpaceFrog]

Jquery le permet, mais il y a une manip a faire niveau Jquery ...

Watilin

Heureusement, jQuery est partageuse. Il suffit de la déclarer après MooTools, et de rajouter cette instruction au début de ton propre script :
Code :

jQuery.noConflict();

[andyroddick]

Franchement grand merci à "Watilin" QUi vient de résoudre mon problème, je confirme donc que cela fonctionne, mais puis-je avoir plus d'informations sur le fait que cela n'est pas TRES bien à utiliser.

Les Raisons, si il y a quelque chose que je peux faire de mieux...

Merci pour toutes vos informations et pour vos réponses rapides.

Pour information voici ce que j'ai fais pour que cela fonctionne:

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
window.addEvent('domready',function(){
		var info6 = $('box6').getNext().set('opacity',0);
		var nS6 = new noobSlide({
			mode: 'vertical',
			box: $('box6'),
			items: '',
			size: 180,
			handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
			handle_event: 'mouseenter',
 
			fxOptions: {
				duration: 1000,
				transition: Fx.Transitions.Back.easeOut,
				wait: false
			},
		});
		nS6.next();
	});
 
	jQuery.noConflict();
 
	jQuery(document).ready(function()
	{
		jQuery("#secondpane p.menu_head").mouseover(function()
	    {
		     jQuery(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("normal");
	         jQuery(this).siblings().css({backgroundImage:"url(left.png)"});
		});
	});

Cordialement,

Yo

[SeThYy]

Je persiste à penser qu'il ne vaut mieux utiliser qu'une librairie, vu leur poids, et vu le poids de Moo !

[vermine]

Entièrement d'accord pour éviter de mélanger les Framework. Par contre, le poids de Mootools peut être réduit en exportant uniquement certaines fonctionnalités.
Bon d'accord, on ne fait pas ce que l'on veut non plus et je parie que dans ce cas-ci il faut la version complète.

[SeThYy]

lol ^^ Mootools est plus lourd que jQuery il me semble, même la version "packée"... à vérifier ^^

[andyroddick]

D'accord, je comprends ce que vous voulez dire mais j'utilise dans ma page plusieurs fois le moteur mootools (multiplication de la même taches) et j'utilise aussi donc jQuery, en local cela fonctionne à merveille. Mais si je comprends votre raisonnement je risque d'avoir des problèmes lorsque je vais publier mon site?


Juste pour petite information c'est la première fois que j'utilise Mootools et jQuery.

Merci.

[vermine]

Non non, avec la proposition de Watilin tout devrait aller. Ce que SeThYy explique c'est que la page va être lourde alors qu'elle pourrait peut-être être plus légère.

[andyroddick]

Oui je vois mais pour qu'elle soit plus légère que faut-il que je fasse ou comment dois-je coder cette partie?

Yo

[vermine]

Sur le site de Mootools, il faut regarder ce qu'il y a moyen de faire. Mais bon, vérifiez bien que vous ayez les fonctionnalités qu'il vous faut.
A priori je ne toucherais à rien et je laisserais tout ça comme ça. La base est lourde d'elle-même. Vous n'y échapperez pas.

[andyroddick]

D'accord juste une dernière question, si cela ne vous dérange pas, qu'est ce que vous voulez dire par le fait que la base est lourde?

Pour le fonctionnement de la base? Avec beaucoup de fonctions inutiles pour mon application?

Merci...

[SeThYy]

L'idéal serait que tu n'utilises qu'une seule librairie : en fait - ce n'est que mon avis - je penses que jQuery est ce qu'il y a de mieux. Tu peux cependant utiliser Mootools, mais penses bien au fait qu'il y a peut etre l'équivalent du plugin que tu cherche en jQuery (et inversement) !

Bon courage