Conflit avec jquery

**-Brian-** · 27/11/2013, 13h22

Bonjour à tous,

J'ai un conflit entre deux script, je peux faire marché l'un sans l'autre mais pas les deux,

je me suis renseigné sur internet et j'ai pu voir le code magique "JQuery No Conflict", j'ai beau essayé dans tout les sens ça ne fonctionne pas...

Un coup de main me serait fort utile ^^

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
<script src="js/jquery.js"></script>
 
<script>
$(document).ready(function() {
	var $types_entrees = $('#types_entrees');
	var $regions = $('#regions');
 
	// chargement des régions
	$.ajax({
		url: 'catalogue_list_search.php',
		data: 'go', // on envoie $_GET['go']
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			$.each(json, function(index, value) { // pour chaque noeud JSON
				// on ajoute l'option dans la liste
				$types_entrees.append('<option value="'+ index +'">'+ value +'</option>');
			});
		}
	});
 
	// à la sélection d'un type d'entrée dans la liste
	$types_entrees.on('change', function() {
		var val = $(this).val(); // on récupère la valeur du type d'entrée
 
		if(val != '') {
			$regions.empty(); // on vide la liste des régions
 
			$.ajax({
				url: 'catalogue_list_search.php',
				data: 'id_type_entree='+ val, // on envoie $_GET['id_type_entree']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$regions.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
	});
});
</script>

Code :

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

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

jcart/js/jcart.min.js marche parfaitement,

MAIS ma fonction javascript marche partiellement,

c'est à dire que en suprimant

Code :

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

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

Je n'ai aucun soucis au niveau de ma liste déroulante.

jcart.min.js commence comme cela: $(function(){ ...

merci, si quelqu'un peux me sauvé la vie ^^

En gros cette partie là ne fonctionne pas avec mon script jcart, les types d'entrée s'affiche mais pas les régions....

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
	// à la sélection d'un type d'entrée dans la liste
	$types_entrees.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la région 
		if(val != '') {
			$regions.empty(); // on vide la liste des départements
 
			$.ajax({
				url: 'catalogue_list_search.php',
				data: 'id_type_entree='+ val, // on envoie $_GET['id_type_entree']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$regions.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
	});
});

**SylvainPV** · 27/11/2013, 13h56

Bonjour,

Il y a là beaucoup de code mais tu ne nous donnes pas les informations essentielles, à savoir quelle est la source du conflit. Tu parles de jQuery, mais avec quoi rentre-t-il en conflit ? Un conflit, c'est deux librairies qui se battent pour une seule variable globale. Quelle est l'autre librairie ? Ton code perso ne définit aucune variable globale, donc ce n'est pas là le problème.

**-Brian-** · 27/11/2013, 20h38

Pour le premier script, j'ai un type d'entrée (Bouteilles, Fontaines à vins etc...), je choisis Bouteilles, j'ai normalement ma liste déroulante qui se remplit et qui m'affiche les régions affiliés au type d'entrée "Bouteilles".

Ce qu'il ce passe, si j'enlève cette ligne.

Code :

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

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

Mon script (de liste déroulante) fonctionne CORRECTEMENT.

En clair avec un screen :

jcart-min :

Code :

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

1
2
3
// jCart v1.3
// http://conceptlogic.com/jcart/
$(function(){var a=(function(){var k="jcart",b=$("#jcart"),e=$("[name=jcartToken]").val(),i=$("#jcart-tooltip");var d=(function(){var l=null;$.ajax({url:k+"/config-loader.php",data:{ajax:"true"},dataType:"json",async:false,success:function(m){l=m},error:function(){alert("Ajax error: Edit the path in jcart.js to fix.")}});return l}());var f=(function(){if(d.tooltip===true){i.text(d.text.itemAdded);$(".jcart [type=submit]").mouseenter(function(m){var l=m.pageY+25,n=m.pageX+-10;$("body").append(i);i.css({top:n+"px",left:l+"px"})}).mousemove(function(m){var n=m.pageY+25,l=m.pageX+-10;i.css({top:n+"px",left:l+"px"})}).mouseleave(function(){i.hide()})}$("#jcart-buttons").remove();$.ajaxSetup({type:"POST",url:k+"/relay.php",success:function(l){b.html(l);$("#jcart-buttons").remove()},error:function(n,p){var o=n.status,l="Ajax error: ";if(o===0){l+="Check your network connection."}if(o===404||o===500){l+=o}if(p==="parsererror"||p==="timeout"){l+=p}alert(l)}})}());var c=$("#jcart-is-checkout").val();function j(n){var m=n.find("[name="+d.item.qty+"]"),l=n.find("[name="+d.item.add+"]");$.ajax({data:n.serialize()+"&"+d.item.add+"="+l.val(),success:function(o){if(m.val()>0&&i.css("display")==="none"){i.fadeIn("100").delay("400").fadeOut("100")}b.html(o);$("#jcart-buttons").remove()}})}function g(l){var o=l.parent().find('[name="jcartItemId[]"]').val();var n=l.val();if(n){var m=window.setTimeout(function(){$.ajax({data:{jcartUpdate:1,itemId:o,itemQty:n,jcartIsCheckout:c,jcartToken:e}})},1000)}l.keydown(function(p){if(p.which!==9){window.clearTimeout(m)}})}function h(m){var n=m.attr("href");n=n.split("=");var l=n[1];$.ajax({type:"GET",data:{jcartRemove:l,jcartIsCheckout:c}})}$(".jcart").submit(function(l){j($(this));l.preventDefault()});b.keydown(function(l){if(l.which===13){l.preventDefault()}});b.delegate('[name="jcartItemQty[]"]',"keyup",function(){g($(this))});b.delegate(".jcart-remove","click",function(l){h($(this));l.preventDefault()})}())});

**NoSmoking** · 27/11/2013, 21h08

Bonjour,
il va être difficile d'aller plus loin sans la structure du document, peut être as tu une page de test en ligne?

**-Brian-** · 28/11/2013, 14h35

Envoyé par NoSmoking

Bonjour,
il va être difficile d'aller plus loin sans la structure du document, peut être as tu une page de test en ligne?

Salut,

page de test :
http://www.agence-les-arcades.fr/test/

(ne pas faire attention au design etc...)

J'ai un peu modifié mon code depuis, on peux voir ici que lorsque l'on déroule type d'entrée, que l'on sélectionne une entrée, rien ne ce passe dans région.

Alors que sans jcart, sans cette ligne :
<script type="text/javascript" src="jcart/js/jcart.min.js"></script>

La liste déroulante se remplit correctement en fonction du choix...

merci.

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<script src="http://dev.chez-syl.fr/article_listes_regions_dep/jquery.js"></script>
 
<script>
$(document).ready(function() {
 
	var $types_entrees = $('#types_entrees');
	var $regions = $('#regions');
    var $producteurs = $('#producteurs');
 
	// chargement des types d'entrées
	$.ajax({
		url: 'catalogue_list_search.php',
		data: 'go', // on envoie $_GET['go']
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			$.each(json, function(index, value) { // pour chaque noeud JSON
				// on ajoute l'option dans la liste
				$types_entrees.append('<option value="'+ index +'">'+ value +'</option>');
			});
		}
	});
 
	// chargement des régions
	$.ajax({
		url: 'catalogue_list_search.php',
		data: 'go2', // on envoie $_GET['go']
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
		$.each(json, function(index, value) { // pour chaque noeud JSON
	    // on ajoute l'option dans la liste
		$regions.append('<option value="'+ index +'">'+ value +'</option>');
		});
		}
	});
 
	// chargement des producteurs
	$.ajax({
		url: 'catalogue_list_search.php',
		data: 'go3', // on envoie $_GET['go']
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			$.each(json, function(index, value) { // pour chaque noeud JSON
				// on ajoute l'option dans la liste
				$producteurs.append('<option value="'+ index +'">'+ value +'</option>');
			});
		}
	});
 
	// à la sélection d'un type d'entrée dans la liste
	$types_entrees.on('change', function() {
 
		var val = $(this).val(); // on récupère la valeur de la région
 
		if(val != '') {
		$regions.empty(); // on vide la liste des régions
 
			$.ajax({
				url: 'catalogue_list_search.php',
				data: 'id_type_entree='+ val, // on envoie $_GET['id_type_entree']
				dataType: 'json',
				success: function(json) {
                $regions.append('<option value="">-- Régions --</option>');
					$.each(json, function(index, value) {
						$regions.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
	});
 
	// à la sélection d'une région dans la liste
	$regions.on('change', function() {
 
		var val = $(this).val(); // on récupère la valeur de la région
 
		if(val != '') {
		$producteurs.empty(); // on vide la liste des producteurs
 
			$.ajax({
				url: 'catalogue_list_search.php',
				data: 'id_region='+ val, // on envoie $_GET['id_region']
				dataType: 'json',
				success: function(json) {
                $producteurs.append('<option value="">-- Producteurs --</option>');
					$.each(json, function(index, value) {
						$producteurs.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
	});
});
</script>
 
<script type="text/javascript" src="jcart/js/jcart.min.js"></script>

**NoSmoking** · 28/11/2013, 19h13

Envoyé par -Brian-

je me suis renseigné sur internet et j'ai pu voir le code magique "JQuery No Conflict", j'ai beau essayé dans tout les sens ça ne fonctionne pas...

je n'osais y croire mais pas une once de noConflict() dans ta page, je te renvoies donc à la réponse faite par danielhagnoul qui est toujours de bons conseils

**danielhagnoul** · 28/11/2013, 00h45

Envoyé par -Brian-

je me suis renseigné sur internet et j'ai pu voir le code magique "JQuery No Conflict", j'ai beau essayé dans tout les sens ça ne fonctionne pas...

Où dois-je poser mon $ ?

Extrait :

Code :

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

1
2
3
jQuery.noConflict();
 
jQuery(function($){ ... });

Conflit avec jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager