Récupéré dernière valeur d'un slider en jquery

J'ai un slider qui fonctionne parfaitement, a un exception.

lors ce que l'on modifie la valeur d'un slider, je peux avoir 300 - 400 - 500 requête SQL

ce qui est vraiment dérangent.

Comment, je peux faire, pour qu'il y ai que la valeur de l’arrêt de la souris qui soit prix en compte, ou que la requête sql soit la dernière.

voici le code que j'ai fait

		<script>
		$(function() {
			$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 1000000,
			step: 10000,
			values: [ 250000, 700000 ],
			slide: function( event, ui ) {
			$( "#amount" ).val( " € " + ui.values[ 0 ] + " - € " + ui.values[ 1 ] );
			$( "#PrixMin" ).val( ui.values[ 0 ] );
			$( "#PrixMax" ).val( ui.values[ 1 ] );
			
			$( "#PrixMin" ).trigger("change");
			$( "#PrixMax" ).trigger("change");
			
			$( "#PrixMin" ).on("change",function(e){
			moteur($(this).val())
			})
			
			$( "#PrixMax" ).on("change",function(e){
			moteur($(this).val())
			});
			}
			});
			$( "#amount" ).val( " € " + $( "#slider-range" ).slider( "values", 0 ) + " - € " + $( "#slider-range" ).slider( "values", 1 ) );
			});
			</script>

<label for="amount" class="budget">Votre budget:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>
<input type="hidden" name="PrixMini[PrixMin]" id="PrixMin" value="0">
<input type="hidden" name="PrixMaxi[PrixMax]" id="PrixMax" value="9999999999">	

et la requête en ajax.

<script>
function moteur(str) {
	var rechercheVille = document.getElementById('rechercheVille').value;
	var RechercheTypeBien = document.getElementById('RechercheTypeBien').value;
	var RecherchePieces = document.getElementById('RecherchePieces').value;
	var PrixMin = document.getElementById('PrixMin').value;
	var PrixMax = document.getElementById('PrixMax').value;

    if (str.length == 0) { 
		// Envoie de touts les biens
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
				// Création roue d'attente
			}
        }
        xmlhttp.open("GET", "http://www.*****-*****.eu/****/****/*******.php?rechercheVille=" + rechercheVille + "&RechercheTypeBien=" + RechercheTypeBien + "&RecherchePieces=" + RecherchePieces + "&PrixMin=" + PrixMin + "&PrixMax=" + PrixMax, true);
        xmlhttp.send();
    }
}
</script>

si je mets les limites sur ce slider j'ai 930 requête, c'est pas possible ....
Modifié par guillaume2vo (10 May 2015 - 14:52)

En fait le problème ici c'est que tu fais un appel ajax à chaque micro-déplacement du curseur, ce qui n'est pas utile dans ton cas. Il faut faire l'appel lorsque l'utilisateur lâche le clic, en évitant toutes les étapes intermédiaires du déplacement.

Il te suffit donc de te servir de l'évènement "change" du slider au lieu de "slide". Si tu veux quand même mettre à jour la valeur des champs pendant que le curseur est déplacé c'est possible de cumuler les deux évènements : je t'ai fait un exemple ici.

https://jsfiddle.net/2xkeeh2c/
Modifié par Freez (12 May 2015 - 23:09)