[AJAX] avec un sliders de prix

**lelectronique.com** · 30/10/2011, 20h22

Bonsoir,

Voila je souhaite mettre en place un slider pour sélectionner une tranche de prix mais j'ai des petits soucis
voici 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<script language="javascript" type="text/javascript">
function prix(mini_velo,maxi_velo) 
{ 	
	var xhr_object = null;
 
	if(window.XMLHttpRequest) // Firefox
		xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // Internet Explorer
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else { // XMLHttpRequest non supporté par le navigateur
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		return;
	}
 
	var data     = null;
 
	xhr_object.open("GET", "/ajax/prix.php?prix_max_velo="+maxi_velo+"&prix_min_velo="+mini_velo, true);
 
	xhr_object.onreadystatechange = function() {
	   if(xhr_object.readyState == 4) {
		  self.location.href="<? echo $_SERVER['REQUEST_URI'] ?>";
 
	   }
}
   	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr_object.send(data);
 
 
}
 
jQuery(document).ready(function($){
	/*
	 * Sliders
	**/
	$("#slider_prix").slider({
		range:  true,
		min:    0,
		max:    11999.00,
		values: [154, 441],
		slide: function(event, ui){
			$('#prix_min').html(ui.values[0]);
			$('#prix_max').html(ui.values[1]);
			prix(ui.values[0],ui.values[1]);
		}
			});
	$('#prix_min').html($("#slider_prix").slider("values", 0));
	$('#prix_max').html($("#slider_prix").slider("values", 1));
});</script>

le slide fonctionne très bien les prix affichées aussi, par contre il tente de rafraicihir la page trop souvent j'ai donc modifié le code de la fonction comme ceci :

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
 
<script language="javascript" type="text/javascript">
jQuery(document).ready(function($){
	/*
	 * Sliders
	**/
	$("#slider_prix").slider({
		range:  true,
		min:    0,
		max:    11999.00,
		values: [154, 441],
		change: function(event, ui){
			$('#prix_min').html(ui.values[0]);
			$('#prix_max').html(ui.values[1]);
			prix(ui.values[0],ui.values[1]);
		}
			});
	$('#prix_min').html($("#slider_prix").slider("values", 0));
	$('#prix_max').html($("#slider_prix").slider("values", 1));
});</script>

maintenant la page s'actualise correctement mais plus le prix en direct, il s'affiche au raffraichissement de la page j'ai donc essayé de combiner la fonction slide et change sur la meme fonction comme ceci

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
 
<script language="javascript" type="text/javascript">
jQuery(document).ready(function($){
	/*
	 * Sliders
	**/
	$("#slider_prix").slider({
		range:  true,
		min:    0,
		max:    11999.00,
		values: [154, 441],
		slide: function(event, ui){
			$('#prix_min').html(ui.values[0]);
			$('#prix_max').html(ui.values[1]);
			prix(ui.values[0],ui.values[1]);
		}
		change: function(event, ui){
			prix(ui.values[0],ui.values[1]);
		}
	});
	$('#prix_min').html($("#slider_prix").slider("values", 0));
	$('#prix_max').html($("#slider_prix").slider("values", 1));
});</script>