Question

I am making a hybrid mobile app and I want to apply the jQueryMobile-initialize method after I get html back from a webservice.. (by “hybrid mobile app” I mean that I start w an html page, use jQueryMobile for styling, and use ajax calls to web services to get data on button clicks etc. Finally, I fold all that into a native app.)

So, does anyone know if there is something like (pseudo)
$.initWithJQueryMobile($(‘#my_div_id’))
NOTE: I am not going to a new, data-role=page when I do the ws request/response.

Background: As you may know, when it initializes an html file, jqm changes this

    <select id="116" data-role="slider" >
    <option value='no'>No</option>                               
    <option value='yes'>Yes</option></select> 

into this

I want to do that AFTER my webservice returns – long after the pagecreate event has fired.

When you click or tap the flip toggle (they call it), it toggles between Yes and No.

To achieve this jqm is radically re-writing the dom with spans, divs and styles AND applying a javascript method to the onclick for the flip toggle.

I can steal the html from page-view-source, so if someone knows the jqm js method that makes it toggle I can take it from there (I know, big hack). Or …. is there an $.initWithJQueryMobile() function that we can use?

Answer 1

The tags I want to jqm-initialize are <select> jqm changes them into flip-toggles. jqm has us mark up the <select> with data-role='slider'

Anyway I am loading a bunch of selects in response to the user entering a 5th number in the zipcode box. It turns out that this works:

// get an array of the <select>s you want to initialize
var endorsement_controls =  $('div#divEndorsements select');
endorsement_controls.each(function(){
    // the next two lines make them flip toggles
    $(this).slider();
    $(this).slider('refresh');
});

$.slider() is what they call a widget. There is an analog for most if not all the controls, I guess.

I got the game-changing hint from Craig Brooks