Discussion :

[General_Batton]

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 HTML :

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

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 JS :

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
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.

[danielhagnoul]

Bonsoir

Code :

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

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

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
$(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 ] );
	}); 
 
});

[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.

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.

[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.

[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 !