11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je vous expose mon problème. J'utilise jQuery UI pour l'affichage d'un range slider. Je souhaiterais charger des options préalablement récupérer depuis ma bd. Je fais donc un $.post en json.
Mais je remarque que ma fonction $.post s'exécute en dernière alors qu'elle est situé avant la construction du range slider.

Voici la partie code :

<script type="text/javascript">	
		$(function(){
			var valMin;
			var valMax;
			
			$.post('ajax/prix.php',function(data){
				 valMin = data.min;
				 valMax = data.max;
				 	alert("1 : " + valMin);
			}, "json"); 
				alert("2 : " + valMin);		
			$("#slider-range").slider({ min: valMin });	// Ici je souhaitrais charger l'option prix min récupérer en json depuis ma bd.
                $("#slider-range").slider({
				range: true,
				step: 5,
				max: 500,
				slide: function(event, ui) {
					$("#amount").val(ui.values[0] + '€ - ' + ui.values[1] + '€');
				}
			});
			$("#amount").val($("#slider-range").slider("values", 0) + '€ - ' + $("#slider-range").slider("values", 1) + '€');
		});
</script>


Je comprend pas pourquoi l'alert n°2 s'effectue en premier :s.
Merci d'avance, hype.

EDIT : Je viens de remarquer quand sous firefox, c'est l'inverse contrairement à chrome. A vrai dire, je suis un peu perdu là. Si quelqu'un aurait une idée Smiley smile .
Modifié par hype (23 Jun 2010 - 11:01)
Si je ne me trompe pas, les fonction jQuery (et javascript en général ?) ne sont pas obstructifs. C'est à dire qu'elles se lancent les unes après les autres sans tenir compte de savoir si la précédente est fini.
On peut remarquer ça avec les effets de fade par exemple.

Dans ton cas, le 2ème alert() est lancé alors que la requête ajax n'as pas encore retournée de résultat. D'où l'utilité de la fonction callback.
Modifié par moust (22 Jun 2010 - 23:49)
J'étais bien fatigué hier soir, et j'ai fait un peu n'importe quoi. En effet, je confirme que les appels en JS ne sont pas obstructifs.
Il suffit donc de préciser un callback success à ma fonction $.post pour exécuter mes instructions dans celle ci qui me renvoit mon data.

Ce qui nous donne :


$(function(){
			$.post('ajax/prix.php',function success (data){				
				$("#slider-range").slider({
					range: true,
					step: 5,
					min: (data.min - 1),
					max: (data.max),
					values: [data.min, data.max++],
					slide: function(event, ui) {
						$("#amount").val(ui.values[0] + '€ - ' + ui.values[1] + '€');
					}
				});
			$("#amount").val($("#slider-range").slider("values", 0) + '€ - ' + $("#slider-range").slider("values", 1) + '€');
			}, "json");
		});