• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3648
  • Last Modified:

JQuery - resetting a slider and forcing refresh of set values

Hi,
I have a jquery slider setup:

		<script>
			$(function() {
				var icon = '<%=Session("currencyicon")%>';
				var displayvalues = ['Free',icon + 500,icon + 1000,icon + 1500,icon + 2000,icon + 3000,icon + 4000,icon + 5000,icon + 6000,icon + 7000,icon + 8000,icon + 9000,icon + 10000,icon + 15000,icon + 20000,icon + 25000,icon + 30000,icon + 35000,icon + 40000,icon + 45000,icon + 50000,icon + 100000,icon + 200000 + '+'];
				var realvalues = [0,500,1000,1500,2000,3000,4000,5000,6000,7000,8000,9000,10000,15000,20000,25000,30000,35000,40000,45000,50000,100000,200000];
				var storedfrom = parseInt('<%=v_feefrom%>');
				var storedto = parseInt('<%=v_feeto%>');
				var valuefrom = realvalues.indexOf(storedfrom); // 1
				var valueto = realvalues.indexOf(storedto); // 1
				if (valuefrom == -1) {
					valuefrom = 0;
				}
				if (valueto == -1) {
					valueto = 22;
				}
				$("#feeslider").slider({
					range:true,
					min:0,
					max:22,
					values:[valuefrom,valueto],
					slide:function(event,ui){
						$("#feedisplay").html(displayvalues[ui.values[0]]+" to "+displayvalues[ui.values[1]]);
						$("#feefrom").val(realvalues[ui.values[0]]);
						$("#feeto").val(realvalues[ui.values[1]]);
					}
				});
				$("#feedisplay").html(displayvalues[$("#feeslider").slider("values",0)]+" to "+displayvalues[$("#feeslider").slider("values",1)]);
				$("#feefrom").val(realvalues[$("#feeslider").slider("values",0)]);
				$("#feeto").val(realvalues[$("#feeslider").slider("values",1)]);
			});
		</script>

Open in new window



It works a treat.

I have a rest button on the form that resets the slider (amonst other things):

	$("#reset").bind( "click", function() {
		$("#feeslider").slider("values", 0, 0);
		$("#feeslider").slider("values", 1, 22);
	});

Open in new window


When I use the reset button it resets the slider position just fine, but it doesn't fire the code in the same way as when the user changes the slider position, so the fields that get updated when the user slides the slider are not updated when the reset button programmatically resets them.

Is there a way of forcing the functionality of the slider to fire the code the same way either by changing the way I am resetting or changing the slider function (maybe by firing it on a change of value in some way?).

Some ideas would be greatly appreciated.

Regards,
0
splanton
Asked:
splanton
1 Solution
 
vr6rCommented:
I would break out the code for the "slide" event that you set during initialization of the slide control into its own function, then call that function from the slide event.  

Then you can just call that same function in your reset button click (or from anywhere else you want to initiate the slide function).

replace your $('#feeslider').slider... with this:
$("#feeslider").slider({
	range:true,
	min:0,
	max:22,
	values:[valuefrom,valueto],
	slide: sliding
});

function sliding(){
	var sld = $('#feedisplay');
	$("#feedisplay").html(displayvalues[sld.slider("values", 0)]+" to "+displayvalues[sld.slider("values", 1)]);
	$("#feefrom").val(realvalues[sld.slider("values", 0)]);
	$("#feeto").val(realvalues[sld.slider("values", 1)]);
}

Open in new window


and replace your reset button code with this:
$("#reset").bind( "click", function() {
	$("#feeslider").slider("values", 0, 0);
	$("#feeslider").slider("values", 1, 22);
	sliding();
});

Open in new window

0
 
splantonAuthor Commented:
vr6r,
Firstly, apologies for the lateness getting back to you. I tried this solution but all I get is an interesting debug message:
"Error: cannot call methods on slider prior to initialization; attempted to call method 'values'"

I am now stumped.

Regards,
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now