interaction entre 2 plugins jquery. conflit de $ [Résolu]

[shivafrodite]

Bonjour,
Tout d'abord bonne année.

J'ai 2 plugins jquery qui fonctionnent sur une meme page html.

L'un et l'autre marchent très bien indépendamment, mais lorsque je mets les deux à la fois, je n'ai que le 2ème qui fonctionne.

Il y a apparemment une interaction avec le $ de jquery.
Je voudrais bien le changer par $jquery par exemple mais je ne sais pas dans quel fichier le changer.
Je ne suis pas sur d'ailleurs que ce soit cela le problème.
Débutante en javascript et jquery j'ai du mal à déchiffrer ces longues lignes de code.
J'ai mis mon essai en ligne pour que cela soit plus simple pour vous à l'adresse :
ici meme

En fait la question c'est comment mettre 2, plugins jquery dans une même page?

Merci de vos réponses

[SpaceFrog]

noconflict() ...

[dukej]

Envoyé par SpaceFrog

noconflict() ...

un id ne doit surtout pas commencer par un chiffre et ne peut surtout pas être un chiffre, préfixe le avec une lettre ton id="1"

[shivafrodite]

Je croyais que noconflict() était lorsqu'on utilisait 2 bibliothèques différentes. Comme scriptaculous et jquery.
C'est pour ça que j'ai changé pour utiliser 2 plugins de la même bibliothèque (jquery).

Dois-je utiliser noconflict() quand même.
J'ai essayé en mettant id="m1" au lieu de 1 mais ca ne marche pas.

[SpaceFrog]

noconflict peut il me semble aussi servir pour gerer des conflits entre plugins

[shivafrodite]

Ok j'ai essayé mais la c'est pire que tout. Je n'ai plus d'erreurs javascript mais je n'ai plus rien qui s'affiche.

Voici le code :

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
 
<!--   Menu  -->
	<script type="text/javascript" src="javascript/jquery.1.4.4.js"></script>  <!-- Fichier Jquery -->
	<script type="text/javascript" src="javascript/jquery.lavalamp.js"></script> 
	<script type="text/javascript" src="javascript/jquery.easing.js"></script>  
	<script type="text/javascript">
 
		jQuery.noConflict();
		{
		// Du code qui utilise $() pour jQuery().
			(function($) 
			{ 
				$(function() 
					{	
						$("m1").lavaLamp(
						{
							fx: "backout",
							speed: 700,
							click: function(event, menuItem) 
										{
										return false;
										}
						});
					});
			});
 
		}(jQuery);
		// Du code utilisant le $() d'autres bibliothèques JS.
		</script> 
		<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js">

C'est moi qui utitlise mal la fonction je suppose, mais étant débutante javascript, c'est pas évident

[WuKoDLaK]

Salut,
Si ça peut te rassurer j'ai le même genre de soucis!
Ancien programmeur je découvre les nouveauté javascript et jquery.
Je m'arrache les cheveux sur ce type d'erreur, indépendemment tout fonctionne, lorsque je valide mes script au sein de ma page finale, c'est la cata.

j'ai testé les trucs du style

Code :

1
2
3
4
5
6
7
 
	jQuery.noConflict();
	jQuery(document).ready(function() {
	   jQuery("a").click(function() {
	     alert("test : vous avez cliqué !");
	   });
	 });

j'ai plusieurs appels à $(document) et donc je ne sais pas non plus si le noConflict peut être appelé par exemple 3 fois de suite. A chaque explication trouvée, un seul appel se fait....

exemple

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
	$(document).ready(function() {
	    $("div.test").add("p.quote").addClass("blue").slideDown("slow");
	 });
 
	jQuery.noConflict();
	jQuery(document).ready(function() {
	   jQuery("a").click(function() {
	     alert("test : vous avez cliqué !");
	   });
	 });
 
 
	var j = jQuery.noConflict();
        j(document).ready(function() {            
           j("#container").load("mapage.php");  
           j("#container").fadeIn("slow");
           j("#div_a_effacer").slideUp("fast");
       });

C'est une exemple peut être absurde (je ne sais pas) mais c'est là dessus que je porte mes recherches ces jours ci....
Si je trouve une solution à ce soucis je te ferais signe.

Bon courage !

[danielhagnoul]

Envoyé par shivafrodite

En fait la question c'est comment mettre 2, plugins jquery dans une même page?

Bonsoir

L'ordre d'insertion des plug-ins et widgets est important, je vous suggère d'essayer comme suit :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
	<script type="text/javascript" src="javascript/jquery.1.4.4.js"></script>
	<script type="text/javascript" src="javascript/jquery.easing.js"></script>
	<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
	<script type="text/javascript" src="javascript/jquery.lavalamp.js"></script> 
	<script type="text/javascript"> 
		$(function() {
			$("#1").lavaLamp({
			fx: "backout",
			speed: 700,
			click: function(event, menuItem) {
						return false;
					}
				});
			});
	</script>

Le dernier script doit être inséré juste avant le tag </body> :

Code html :

1
2
3
4
5
6
7
 
	<script> 
		$(function() {
			$("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
		});
	</script>
</body>

[WuKoDLaK]

Bonjour danielhagnoul,

je lis ta citation de shivafrodite, et je me demande si tu considères que mon post est en dehors de sa question ? A lire sa requête, j'ai pensé être dans le même problème et donc au lieu d'ouvrir un autre post identique, si mon source permet de résoudre ses interrogations et les miennes, je posterais ici. Le cas échéant, j'ouvrirais un autre post.

Le code présenté ci-dessus, n'est qu'une invention rapide de ma part pour donner un exemple concret de ce que j'avais testé. Je présenterais mon source ici ou dans un autre post pour apporter une réponse claire à ma question et aux questions qui concernent à mon sens directement ce post.

PS : j'ai lu ton aide sur les clôtures, j'en ai entendu parlé effectivement. Ta page semble constructive merci d'avance.

cordialement,

[danielhagnoul]

Bonsoir

La règle est simple, une nouvelle question c'est une nouvelle discussion. Mais même pour des problèmes identiques il est toujours préférable d'ouvrir une nouvelle discussion pour la clarté du propos.

Dans votre cas, je ne sais pas si le "noConflict()" est justifier, mais essayer le code suivant et si cela ne marche pas ouvrez une nouvelle discussion en fournissant les codes nécessaires.

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	jQuery.noConflict();
 
	jQuery(function($){
		$("div.test").add("p.quote").addClass("blue").slideDown("slow");
 
		$("a").click(function() {
			alert("test : vous avez cliqué !");
		});
 
		$("#container").load("mapage.php", function(){
			$(this).fadeIn("slow");
		});
 
		$("#div_a_effacer").slideUp("fast");
	});
</script>

[WuKoDLaK]

Bonsoir,

pas de soucis, je test cela demain et j'aviserais en fonction.
Encore désolé je voulais éviter un doublon effectivement.

Bonne fin de soirée,