Réinitialiser Jquery UI Slide

Version imprimable

Bonjour,

Sur un formulaire j'ai un slide qui me permet définir une période entre deux années (exemple : entre 1985 et 2003). A côté de ce slide j'ai une image qui me permet(tra) de réinitialiser mon slide en cliquant dessus.

Le problème c'est que j'arrive à remettre à sa valeur par défaut l'input dans lequel s'affiche le résultat mais pas le slide en lui-même.

Je poste mon code ci dessous, si vous voyez une erreur ou si vous avez une solution, je suis tout ouïe!

Code:

1
2
3
4
5
6
	<label class="fldLabelDemi" for="itDateRange">Date : 
		<input type="text" id="itDateRange" name="itDateRange" />
	</label>
	<div id="sliderDate"></div>
	<span class="imgDelete" id="XXitDateRange"></span>
	<!-- imgDelete permet de remettre à 'default' le slide -->

Code:

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
jQuery(document).ready(function($){ 
  	var $frmRecherche = $("#frmRecherche");
 
	//année en cours
	var date = new Date();
	var dateMax = date.getFullYear()
 
	$( "#sliderDate" ).slider({            
		range: true,            
		min: 1980,            
		max: dateMax, 
		step: 1,           
		values: [ 1980, dateMax ],            
		slide: function( event, ui ) {                
			$( "#itDateRange" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );            
		}        
	});        
	$( "#itDateRange" ).val( $( "#sliderDate" ).slider( "values", 0 ) +            
	" - " + $( "#sliderDate" ).slider( "values", 1 ) );	
 
	//remet à 'default' le slider
	$(".imgDelete").click(function(){ 
		var str = this.id;
		itID = str.replace("XX", ""); 
		if(itID == "itDateRange")
		{
			$("#"+itID+"").empty().val("1980 - "+dateMax);	
		}
		else
		{
			$("#"+itID+"").empty().val("");
		}
	}); 
});

Je ne vois vraiment pas comment remettre les deux indicateurs du slide à '1980' pour le minimum et à dateMax pour le maximum.

En attendant, merci d'avoir pris le temps de me lire. ;)

Bonsoir

Code:

1
2
<label class="fldLabelDemi">Date : <input type="text" id="itDateRange"></label>
<div id="sliderDate"></div> <button class="imgDelete">Reset slider</button>

Code:

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
$(function(){
 
	var jObjSlider = $( "#sliderDate" ),
		jObjInputDate = $( "#itDateRange" ),
		dateMax = new Date().getFullYear();
 
	jObjSlider.slider({            
		range : true,            
		min : 1980,            
		max : dateMax, 
		step : 1,           
		values : [ 1980, dateMax ],            
		slide : function( event, ui ) {                
			jObjInputDate.val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );            
		}        
	});
 
	jObjInputDate.val( jObjSlider.slider( "values", 0 ) + " - " + jObjSlider.slider( "values", 1 ) );	
 
	$( ".imgDelete" ).click( function(){ //remet à 'default' le slider
		jObjInputDate.val( "1980 - " + dateMax );
		jObjSlider.slider( "values", [ 1980, dateMax ] );
	}); 
 
});

07/01/2013, 00h17
General_Batton

Bonsoir danielhagnoul et merci pour ta réponse.

Ton code réinitialise bien mon slide (contenu de l'input et remise des valeurs du slide à leurs valeurs par défaut) par contre il effectue un rechargement de ma page et du coup je perds toutes les valeurs des autres input et select.

Y a t'il un moyen d'empêcher cela? Parce là pour un élément du formulaire correctement traité je sacrifie tous les autres. Ca me fait l'effet de déshabiller Paul (et tous ces amis) pour habiller Jack. :mrgreen:

Je pense que ça vient du fait que tu utilises un button dans ton exemple mais je ne vois pas comment contourner ce problème.
07/01/2013, 00h39
danielhagnoul

Bonsoir

Vous pouvez utiliser n'importe quel élément HTML tant qu'il porte la classe "imgDelete".

J'ai utilisé un bouton au lieu d'un "span" seulement pour avoir un exemple plus joli, car je ne disposais pas de votre image.

Je viens de tester et de retester. Il n'y a pas de rechargement de page ni avec Chrome ni avec Firefox. Je n'utilise pas d'autres navigateurs.
07/01/2013, 13h05
General_Batton

Toutes mes excuses, c'est le code pré-existant qui provoquait une erreur, après un nettoyage dans les règles tout fonctionne parfaitement.

Merci bien danielhagnoul ! :ccool: