Solved

JQuery - resetting a slider and forcing refresh of set values

Posted on 2013-12-18
2
2,370 Views
Last Modified: 2014-02-04
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
Comment
Question by:splanton
2 Comments
 
LVL 8

Accepted Solution

by:
vr6r earned 500 total points
Comment Utility
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
 
LVL 2

Author Comment

by:splanton
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now