asked on

jquery ui slider problem, ui.value passes number rather than text value.

hi there, im using jquery ui to create my sliders from a select input. My code works in that it calls a function everytime the slider value changes but ui.value only passes the numerical value of the option rather than the the actual value of the select box, how do i fix this?

my code:

$('#budget').selectToUISlider({
labels: 0,
sliderOptions: {
change:function(e, ui) {
paging('1', '','','1', ui.value , '','' , '');
}
}
});

<select name="budget" id="budget">
<option value="option1" selected="selected">All</option>
<option value="option2">asd</option>
<option value="option3" >dfsdf</option>
<option value="">sdfsdf</option>
</select>
EXAMPLE: looking at the select above, i want the code to pass the value "option1" to my function, however ui.value only passes "1" while otion 2 passes "2" and so on.

Slider resources:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

http://jqueryui.com/demos/slider/

Richard Quadling

I don't know jQuery, but I'm assuming the value is the index of the option, so, try ...

$('#budget').option(ui.value).value

cookiejest

ASKER

thats what i thought but paging('1', '','','1', $('#budget').option(ui.value).value , '','' , ''); does not work?!

Richard Quadling

Can you try ...

change:function(e, ui) {
alert(ui);
alert(ui.value);
paging('1', '','','1', ui.value , '','' , '');
}

Oh. Is it ...

paging('1', '','','1', $('#budget').options(ui.value).value , '','' , '');

option_S_

cookiejest

ASKER

tried that but it didnt work, ive been looking at the slider ui documentation, i think it might be one of the methods but im not sure how to implement them.

.slider( 'option' , optionName , [value] )

or maybe

.slider( 'value' , [value] )

http://jqueryui.com/demos/slider/#method-option

Richard Quadling

Can you show me a URL?

Richard Quadling

Can you change ...

paging('1', '','','1', ui.value , '','' , '');

to

alert(ui.value); // Should be the value.

Does the value change appropriately?

If so, change this to ...

alert(parseInt(ui.value)); // Should still be the value but as a number rather than a string.
alert($('#budget').name); // Should be budget.
alert($('#budget').options); // Should be an array.
alert($('#budget').options(parseInt(ui.value,10)); // Should be an option object.
alert($('#budget').options(parseInt(ui.value,10).value); // Should be the value for the option.

.slider('option', ...) is about getting the SLIDER's options, not the SELECT's <option>'s.

cookiejest

ASKER

hi there thank you for responding,

alert(ui.value); works

alert(parseInt(ui.value)); works

all the rest resturn "undefined".

Richard Quadling

Right. Can you show me the complete HTML source? Ideally an online link.

I use prototype, not jquery, so my syntax may be off.

With $('#budget') I want to get the select which id is 'budget'.

Then I want to find the options property (which is the list of options on the select).

Then I want to find the specific option as specified by ui.value.

Then I want to find the value attribute for that option.

cookiejest

ASKER

Here is the full html, im sorry but i cannot provide an online link at the moment!

<script type="text/javascript"> 
 $(function(){
 
 
$('#posted').selectToUISlider({
labels: 0,
sliderOptions: {
change:function(e, ui) {
//alert(parseInt(ui.value)); // Should still be the value but as a number rather than a string.
alert($('#posted').name); // Should be budget.
//alert($('#posted').options); // Should be an array.
//alert($('#posted').options(parseInt(ui.value,10)); // Should be an option object.
//alert($('#posted').options(parseInt(ui.value,10).value); // Should be the value for the option.
 
//paging('1', '','','1', '', ui.value , '', '');
}
}
}); 
}); 
 
</script> 
 
<select name="posted" id="posted"> 
  <option value="" selected="selected">All</option> 
  <option value="1246804007"> Less than 24 Hours ago</option> 
  <option value="1246717607" >Less than 2 days ago</option> 
  <option value="1246631207">Less than 3 days ago</option> 
  <option value="1246544807">Less than 4 days ago</option> 
  <option value="1246458407">Less than 5 days ago</option> 
  <option value="1246372007">Less than 6 days ago</option> 
  <option value="1246285607">Less than 7 days ago</option> 
  <option value="1245680807">Less than 2 weeks ago</option> 
</select>

Open in new window

ASKER CERTIFIED SOLUTION

Richard Quadling

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cookiejest

ASKER

thats exactly what i needed and I think it will help many others as well!

Richard Quadling

Sorry it took so long, but glad to have helped.