Conflit 2 jquery

Conflit entre 2 JS

Sujet résolu

21 mai 2011 à 18:26:44

Hello !
J'ai récupérer un script permettant de voter comme sur VDM. Je l'ai dupliqué pour ainsi obtenir "Suicide toi" ou "Tu as l'air con. (de l'humour)

Le problème c'est que quand l'un marche, l'autre ne fonctionne pas. Ils marchent séparément.
J'ai effectuer une recherche dans la fonction recherche mais je n'ai pas trop compris

Voici le code pour mon test1.php (avec le 1er qui marche):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>J&rsquo;aime</title>
	
	<style type="text/css">

	body { font-family: Georgia, serif; }
	
	a.jaime { display: inline-block; color: #EF627E; text-decoration: none; }
	a.jaime:hover { text-decoration: underline; }
	a.jaime-a-voter { font-style: italic; cursor: default; background: url(coeur.gif) 0% 50% no-repeat; padding-left: 20px; }
	a.jaime-a-voter:hover { text-decoration: none; }
	
	a.suicide { display: inline-block; color: #EF627E; text-decoration: none; }
	a.suicide:hover { text-decoration: underline; }
	a.suicide-a-voter { font-style: italic; cursor: default; background: url(coeur.gif) 0% 50% no-repeat; padding-left: 20px; }
	a.suicide-a-voter:hover { text-decoration: none; }

	</style>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
	<script type="text/javascript" src="suicide.js"></script> 

    

</head>
<body>
	<h1>Recr&eacute;er un lien J&rsquo;aime fa&ccedil;on Facebook</h1>


    
      <p><a href="#" title="Test" class="suicide">J&rsquo;aime</a></p>

	<p>
		<br />
		Exemple d'utilisation<br />
		<code>
		&nbsp;	&lt;a href=&quot;#&quot; <strong>title=&quot;La cl&eacute;&quot; class=&quot;jaime&quot;</strong>&gt;J&rsquo;aime&lt;/a&gt;
		</code>
	</p>
</body>
</html>

Voici la page test : Page test 1

Voila le code avec le deuxième js qui marche :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>J&rsquo;aime</title>
	
	<style type="text/css">

	body { font-family: Georgia, serif; }
	
	a.jaime { display: inline-block; color: #EF627E; text-decoration: none; }
	a.jaime:hover { text-decoration: underline; }
	a.jaime-a-voter { font-style: italic; cursor: default; background: url(coeur.gif) 0% 50% no-repeat; padding-left: 20px; }
	a.jaime-a-voter:hover { text-decoration: none; }
	
	a.suicide { display: inline-block; color: #EF627E; text-decoration: none; }
	a.suicide:hover { text-decoration: underline; }
	a.suicide-a-voter { font-style: italic; cursor: default; background: url(coeur.gif) 0% 50% no-repeat; padding-left: 20px; }
	a.suicide-a-voter:hover { text-decoration: none; }

	</style>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
	<script type="text/javascript" src="suicide.js"></script> 
	<script type="text/javascript" src="jaime.js"></script>
    

</head>
<body>
	<h1>Recr&eacute;er un lien J&rsquo;aime fa&ccedil;on Facebook</h1>


      <p><a href="#" title="Les rayures" class="jaime">J&rsquo;aime</a></p>
      <p><a href="#" title="Test" class="suicide">J&rsquo;aime</a></p>

	<p>
		<br />
		Exemple d'utilisation<br />
		<code>
		&nbsp;	&lt;a href=&quot;#&quot; <strong>title=&quot;La cl&eacute;&quot; class=&quot;jaime&quot;</strong>&gt;J&rsquo;aime&lt;/a&gt;
		</code>
	</p>
</body>
</html>

Voila le lien du deuxieme js qui marche :
Page Test 2

Voici les liens pour mon js, mais je pense pas que cela vient de la

Page du JS

Dans les deux cas, j'ai juste enlever le :

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

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

Mais je ne peux pas en garder qu'un car apres je veux avoir un "Tu as l'air con" et un "Suicide toi." (pour le moment c'est deux "Tu as l'air con" car je le changerais apres)

Merci de votre aide.

Shukka

24 mai 2011 à 16:57:45

Golmote

24 mai 2011 à 19:24:37

Englobe la totalité du contenu de tes deux fichiers suicide.js et jaime.js dans ce code, pour voir.

(function() {
    // Ici tout le contenu du fichier
}());

Shukka

25 mai 2011 à 18:52:00

Merci de ta réponse, mais je crois ne pas avoir bien compris. J'ai tester sa ici : Test

Voici le code de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>J&rsquo;aime</title>
	
	<style type="text/css">

	body { font-family: Georgia, serif; }
	
	a.jaime { display: inline-block; color: #EF627E; text-decoration: none; }
	a.jaime:hover { text-decoration: underline; }
	a.jaime-a-voter { font-style: italic; cursor: default; background: url(coeur.gif) 0% 50% no-repeat; padding-left: 20px; }
	a.jaime-a-voter:hover { text-decoration: none; }
	
	a.suicide { display: inline-block; color: #EF627E; text-decoration: none; }
	a.suicide:hover { text-decoration: underline; }
	a.suicide-a-voter { font-style: italic; cursor: default; background: url(coeur.gif) 0% 50% no-repeat; padding-left: 20px; }
	a.suicide-a-voter:hover { text-decoration: none; }

	</style>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
<?php 
    (function() {
		
		//contenu du jaime.js
   var Jaime = {
	evenements: function() {
//		$('a.jaime').click(this.click);
		$('a.jaime').click(Jaime.click);
	},
	precharger: function() {
		var jaimes = $('a.jaime');
		for(var i = 0, l = jaimes.length; i < l; i++) {
			$.ajax({
				context: jaimes[i], // $(this)
				type: 'POST',
				url: 'jaime.php',
				data: 'cle=' + encodeURIComponent($(jaimes[i]).attr('title')),
				success: function(data) {
					var votes = parseInt(data);
					if(isNaN(votes)) {votes = '-1';}
					if(votes > 0) {
						$(this).html("Tu as l'air con  " + "(" + votes + ")" );
					} else {
						$(this).html("Tu as l'air con  " + "(" + votes + ")" );
					}
				}
			});
		} // for
	},
	click: function(event) {
		var element = event.currentTarget; // comme this ( et non: event.target )
		$(element).unbind('click'); // stopper les multi-clicks
		$(element).click(function() { return false; }); // blocage du lien
		
		$.ajax({
			context: element, // $(this)
			type: 'POST',
			url: 'jaime.php',
			data: 'vote=&cle=' + encodeURIComponent($(element).attr('title')),
			success: function(data) {
				$(this).css({'opacity':0});
				$(this).addClass('jaime-a-voter');
				var votes = parseInt(data);
				if(isNaN(votes)) {votes = '-1';}
				if(votes > 1) {
						$(this).html("Tu as l'air con  " + "(" + votes + ")" );
					} else {
						$(this).html("Tu as l'air con  " + "(" + votes + ")" );
				}
				$(this).animate({'opacity':1}, {'duration':'slow'});
			},
			error: function() {
				alert('Une erreur s\'est produite, merci de recharger votre page');
			}
		});
		return false;
	}
};

$(document).ready(function() {
	Jaime.evenements();
	Jaime.precharger();
});


// contenu du suicide.js

var Jaime = {
	evenements: function() {
//		$('a.suicide').click(this.click);
		$('a.suicide').click(Jaime.click);
	},
	precharger: function() {
		var jaimes = $('a.suicide');
		for(var i = 0, l = jaimes.length; i < l; i++) {
			$.ajax({
				context: jaimes[i], // $(this)
				type: 'POST',
				url: 'suicide.php',
				data: 'cle=' + encodeURIComponent($(jaimes[i]).attr('title')),
				success: function(data) {
					var votes = parseInt(data);
					if(isNaN(votes)) {votes = '-1';}
					if(votes > 0) {
						$(this).html("Tu as l'air con  " + "(" + votes + ")" );
					} else {
						$(this).html("Tu as l'air con  " + "(" + votes + ")" );
					}
				}
			});
		} // for
	},
	click: function(event) {
		var element = event.currentTarget; // comme this ( et non: event.target )
		$(element).unbind('click'); // stopper les multi-clicks
		$(element).click(function() { return false; }); // blocage du lien
		
		$.ajax({
			context: element, // $(this)
			type: 'POST',
			url: 'suicide.php',
			data: 'vote=&cle=' + encodeURIComponent($(element).attr('title')),
			success: function(data) {
				$(this).css({'opacity':0});
				$(this).addClass('jaime-a-voter');
				var votes = parseInt(data);
				if(isNaN(votes)) {votes = '-1';}
				if(votes > 1) {
						$(this).html("Tu as l'air con  " + "(" + votes + ")" );
					} else {
						$(this).html("Tu as l'air con  " + "(" + votes + ")" );
				}
				$(this).animate({'opacity':1}, {'duration':'slow'});
			},
			error: function() {
				alert('Une erreur s\'est produite, merci de recharger votre page');
			}
		});
		return false;
	}
};

$(document).ready(function() {
	Jaime.evenements();
	Jaime.precharger();
});

}());
?>

</head>
<body>
	<h1>Recr&eacute;er un lien J&rsquo;aime fa&ccedil;on Facebook</h1>


      <p><a href="#" title="Les rayures" class="jaime">J&rsquo;aime</a></p>
      <p><a href="#" title="Test" class="suicide">J&rsquo;aime</a></p>

	<p>
		<br />
		Exemple d'utilisation<br />
		<code>
		&nbsp;	&lt;a href=&quot;#&quot; <strong>title=&quot;La cl&eacute;&quot; class=&quot;jaime&quot;</strong>&gt;J&rsquo;aime&lt;/a&gt;
		</code>
	</p>
</body>
</html>

J'ai essayer sans

Mais sa ne marchais toujours pas...

Voici la page test sans les

<?php ?>

Test

Golmote

25 mai 2011 à 20:02:07

...

Euh... je parlais juste d'éditer le contenu des deux fichiers afin de leur ajouter cette première et cette dernière ligne.

Ton code HTML n'a pas besoin de changer d'un iota.

Shukka

26 mai 2011 à 15:05:37

J'ai fais ce que tu as dis pour les deux fichiers mais toujours le même résultat :/

Golmote

26 mai 2011 à 19:09:10

Peut-on voir la page online ?

Shukka

27 mai 2011 à 8:31:49

Oui voilà : Test

Golmote

27 mai 2011 à 9:03:10

Là y'a plus qu'un seul script sur les deux ?

Shukka

27 mai 2011 à 18:08:24

Oula oui... J'avais oublier de le rajouter...
Cela marche, merci beaucoup !

Conflit 2 jquery

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Conflit 2 jquery

Conflit entre 2 JS

Conflit 2 jquery

Supprimer

Modérer

Signaler le message aux modérateurs