Jquery mobile slider error on refresh

I'm getting this cryptic error when I try to dynamically change the value of a jqm slider (or listview for that matter too)

Undefined

Cannot call methods on slider prior to initialization;

attempted to call method 'refresh'

Here's a simplified ve开发者_StackOverflowrsion of my code

$("#mypage").bind("pagecreate", function(){
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});

I also tried it with $(window).load and $(document).ready with no success but since jqm told me to use the pagecreate event I don't know exactly whats going wrong.

Refreshing form elements

In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the refresh method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the refresh method:

Checkboxes:

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

Radios:

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

Selects:

var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

Sliders:

$("input[type='range']").val(60).slider("refresh");

Flip switches (they use slider):

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");

Source: jQuery Mobile Docs (version 1.1.0)

You'll need to post your actual code to get a proper answer.

You may want to try changing the first line of your code to...

$("#mypage").live("pagecreate", function(){

or...

$('#mypage').live('pagebeforecreate',function(event){

I'm sure you've already seen this page but if you haven't then something in the "Page initialization events" section near the bottom of this page may help...

Page initialization events

You may also want to try the suggestions on this page...

Working with jQuery Mobile's Auto-initialization

I had the same problem. I was able to get it working by turning auto-initialization off.

<input type="range" id="f_range" value="16" min="16" max="99" data-role="none" />

Then you just have to manually initialize as follows, after which calling slider("refresh") will work ok:

$("#f_range").slider();

Clearly there's some bug in the jQuery mobile code which is causing this but at least there is a workaround.

*Update*: Just noticed that on iOS 5 the slider now appears alongside the Safari native slider too, without a text box containing the actual value. Still trying to figure out a fix.

I'm guessing the slider is not actually on that page, i.e. the slider is somewhere in the DOM, but not one of the elements contained in the element representing the [jQuery Mobile] page, which are initialized when the page loads. Refer to jQM's page events for more info.

Here's a way to refresh only sliders on the page:

$(document).on("pagecreate", function(event) {
    $(event.target).find("input[type=number]").slider("refresh");
});

Try on pageinit instead of bind pagecreate.

if (!jQuery.fn.on) jQuery.fn.on = jQuery.fn.live; // older versions of jQuery

$("#mypage").on("pageinit", function(){
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});

or:

$(document).on("pageinit", "#mypage", function() {
    var server = new Updater(); // my ajax object to send / revive data
    server.on("some_event", function(e){ // nothing more than a success callback
        $("#slider").val(e.data.value).slider("refresh");
    }
});