Solved

JQuery - resetting a slider and forcing refresh of set values

Posted on 2013-12-18
2
2,472 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
ID: 39727953
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
ID: 39761868
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adding a Li to a UL after a specified Li contents 2 42
combining jquery scripts 3 20
Angular.js example vocabulary extensions 5 31
Message not shown 5 29
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

914 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

14 Experts available now in Live!

Get 1:1 Help Now