initialize jquery slider with hidden input value from database.

Question

I'm using a slider as user input for a screen. Basically it's a bulk update screen where there is a table with multiple rows, thus multiple sliders. I created it so that the hidden value is what gets posted in the form.

<td>
    <input class="percentageProvidedHidden" type="hidden" name='<%= "Values[" + i + "].Percentage" %>' value='<%=item.Percentage %>' />
            <div class="percentageProvidedSlider"></div>
</td>

I have the update working just fine (move slider changes hidden input value, submit, values are updated in db), however, I can't get the damn thing to initialize with the value of the hidden input (note the "value: " parameter below). In this case I think $(this) isn't actually $('percentageProvidedSlider') but the page itself. Can someone help me get the slider value to initialize with the hidden input field? I'm using ASP .Net MVC 2 so if there are any methods I should try with that I welcome them as well.

$('.percentageProvidedSlider').slider(
    {
        min: 0,
        max: 100,
        step: 25,
        value: $(this).parents('tr').find('input.percentageProvidedHidden').val(),
        slide: function(e, ui) {
            var mypos = ui.value;
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        change: function(event, ui) {
            var myVal = $(this).slider("option", "value");
            $(this).parents('tr').find('input.percentageProvidedHidden').val(myVal);

            var myDropDown = $(this).parents('tr').find('select.verified');

        }
    });

Answer 1

You're correct in this not being right, but it's more the fact that at the time you're declaring the object (if this was the slider object) this is the object that hasn't been added to the DOM yet, so there are no parents. So you'll have to use something like:

$('.percentageProvidedSlider').each(function() {
 var $sld = $(this); // is the current div.percentageProvidedslider
  $sld.slider(
    {
        min: 0,
        max: 100,
        step: 25,
        value: $sld.parents('tr').find('input.percentageProvidedHidden').val(),
        slide: function(e, ui) {
            var mypos = ui.value;
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        change: function(event, ui) {
            var myVal = $(this).slider("option", "value");
            $(this).parents('tr').find('input.percentageProvidedHidden').val(myVal);

            var myDropDown = $(this).parents('tr').find('select.verified');

        }
    });

});

Answer 2

I think I figured it out. After the above code I put the following:

 $('.percentageProvidedSlider').each(function() {
var myVal = $(this).parents('tr').find('input.percentageProvidedHidden').val();
$(this).slider("option", "value", myVal);
});

This seems to work fine.