jQuery Mobile, setting the slider's value

Question

The slider currently renders fine, it just doesn't do what I tell it to.

I can't use $('#slider').val(50).slider('refresh'), and when I do it tells me:

Uncaught cannot call methods on slider prior to initialization; attempted to call method 'refresh'

Which, seems to make sense, since I never initialized it as a slider. Here is my code: Somewhere earlier I create a div "<div id='scrubber'></div>" and just write it to the screen $(cssSelector.html(html); Then once some other part of the code is ready I create the slider:

$('#scrubber').html('<input type="range" name="prog" id="prog" value="0" min="0" max="'+event.jPlayer.status.duration+'"  />').trigger("create");

Then later:

$('#scrubber').val(event.jPlayer.status.currentTime).slider('refresh');

Which gives me that error.

I have tried using $('#scrubber').slider(); but that seems to create a 2nd slider. So then I tried to replace the first slider, but it just messes things up even more. In any case, if I then try to change the value, I no longer get the error, but it still doesn't change the slider's position.

Any ideas?

Answer 1

I haven't worked on jQM for a while, but does it still have the .page() function? If so call page() on the sliders wrapper:

('#scrubber').parent().page();
$('#scrubber').val(event.jPlayer.status.currentTime).slider('refresh');

This will re-render the slider, causing it to be properly initialised.