Solved

JQuery - resetting a slider and forcing refresh of set values

Posted on 2013-12-18
2
2,950 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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)

734 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