[Résolu] 2 jquery sur la même page

Question

ice_tea12

5 Nov 2012 à 14:55

Bonjour à tous,

Je suis débutant en Javascript et jQuery. J'arrive à faire en sorte de mettre un jQuery sur une page, modifier des paramètres, mais j'ai parfois des problèmes de "conflits". La plupart du temps j'essai de modifier l'emplacement des scripts, mais là cela ne fonctionne pas. J'ai trouvé un article sur alsacréation : http://www.alsacreations.com/astuce/lire/79-comment-lancer-plusieurs-fonctions-javascript-au-chargement-dune-page.html. Alors j'ai essayé à mettre

<body onload="lavaLamp(); slides();">

Mais cela ne fonctionne pas.

Comme j'ai dis je ne connais pas bien le Javascript, je doit surement mal me débrouiller...

Quelqu'un pourrait-il me dire quel est mon problème ?

Voici mes 2 scripts :

<!-- Diaporama -->
		<link rel="stylesheet" href="css/global.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
	
		
		<!-- Navigation Javascript -->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
		<script type="text/javascript" src="js/jquery.easing.js"></script>
		
		<script type="text/javascript">
    //Active link functionality using Javascript (thanks to Neha.S). Alternatively, you can use your favorite code to apply the class 'active' to the active page.
       var loc = window.location.href;
       var filename = loc.substring(loc.lastIndexOf('/') + 1, loc.length);
       $("#1 a").removeClass("current");
       $("#1 a[href*='" + decodeURIComponent(filename.replace(/\+/g, " ")) + "']").parent().addClass("current");
 
    //Call Lavalamp, Also assign properties
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

Il y a 2 fois "$(function(){" alors j'ai essayé en mettant "$(function1(){" mais ça n'a pas marché. Il doit y avoir une solution...

Si quelqu'un peut m'expliquer un peu mon erreur... Ce serait gentil Smiley confused

Merci et bonne journée

marcbuils

15 Nov 2012 à 16:18

Bonjour ice_tea12,

Je pense qu'en utilisant jQuery en mode "non conflict", tu dois probablement pouvoir le faire.

Ton code donnerais:


<!-- Diaporama -->
	<link rel="stylesheet" href="css/global.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		// Enregistre l'objet jQuery dans une autre variable
		window.jQuery1 = jQuery.noConflict(true);
		var $ = jQuery1;	// place temporairement jQuery1 dans $

		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
		<script>
			jQuery1 = jQuery.noConflict(true);
		</script>
	
		
		<!-- Navigation Javascript -->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
		<script type="text/javascript" src="js/jquery.easing.js"></script>
		
		<script type="text/javascript">
			// Enregistre l'objet jQuery dans une autre variable
			window.jQuery2 = jQuery.noConflict(true);
			var $ = jQuery2;	// place temporairement jQuery2 dans $

    //Active link functionality using Javascript (thanks to Neha.S). Alternatively, you can use your favorite code to apply the class 'active' to the active page.
       var loc = window.location.href;
       var filename = loc.substring(loc.lastIndexOf('/') + 1, loc.length);
       $("#1 a").removeClass("current");
       $("#1 a[href*='" + decodeURIComponent(filename.replace(/\+/g, " ")) + "']").parent().addClass("current");
 
    //Call Lavalamp, Also assign properties
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

En espérant que ça fonctionne,

Marc
Modifié par marcbuils (15 Nov 2012 - 16:19)

ice_tea12

15 Nov 2012 à 16:28

Bonjour Marc,

Merci de ta solution je la garde en réserve, mais j'avais oublié mon post et je n'ai donc pas mis "résolu".

La ligne de code qui amenait à un conflit était :

<script type="text/javascript" src="js/jquery.js"></script>

.

Je l'ai supprimer et tout fonctionne bien.

Mais je vais garder ta solution, puisque j'avais lu quelques articles sur le mode "no conflict".

Merci encore

marcbuils

16 Nov 2012 à 09:56

Ok,

Je n'avais pas compris le problème alors. Je pensais que tu avais besoin d'utiliser deux version différentes de jQuery sur la même page (pour des problèmes de compatibilité avec tes plugins).
Si ce n'est pas le cas, je te conseil de mettre les balises:


<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

en haut de ta page HTML (à l'interieur de la balise header) et tout le reste du code en bas de ta page, juste avant la balise fermante du body (</body>). Ça te permettra d'avoir une meilleur visibilité tout en optimisant le chargement de ta page.

De plus, l'idéale est de mettre ton code JavaScript custom dans un fichier à part ce qui pourrait donner:

Code de ta page HTML:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- ... -->
    <link rel="stylesheet" href="css/global.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- ... -->
    <script src="js/slides.min.jquery.js"></script>
    <script src="js/jquery.lavalamp.js"></script>
    <script src="js/jquery.easing.js"></script>
    
    <!-- ajout de ton script custom -->
    <script src="js/mon_app.js"></script>
  </body>
</html>

code du fichier "js/mon_app.js":


;(function($){
		$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});

    //Active link functionality using Javascript (thanks to Neha.S). Alternatively, you can use your favorite code to apply the class 'active' to the active page.
       var loc = window.location.href;
       var filename = loc.substring(loc.lastIndexOf('/') + 1, loc.length);
       $("#1 a").removeClass("current");
       $("#1 a[href*='" + decodeURIComponent(filename.replace(/\+/g, " ")) + "']").parent().addClass("current");
 
    //Call Lavalamp, Also assign properties
    $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 });
})(jQuery);

Dans ce cas, ce n'est plus la penne de mettre ton code à l’intérieur de la fonction

$(function(){ /*...*/ });

car cette syntaxe permet de n'exécuter le code que lorsque la page est complètement chargée. Mais sachant qu'on charge notre page juste avant la fin du body, notre page sera chargée.
Modifié par marcbuils (16 Nov 2012 - 09:57)

ice_tea12

16 Nov 2012 à 10:46

Bonjour,

D'accord, je ne connaissais pas ça, je prends note. Merci beaucoup des conseils ! Smiley smile

Bonne journée

Sujet clos