apply jQueryMobile initialization after pagecreate event

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

Answer 2

First if you want to find out more about this topic then take a look at my blog ARTICLE. Or it can be found HERE. Every solution comes with one or more jsFiddle examples.

Here's a rather complex example of $.ajax call with markup enhancement jsFiddle.

$('#index').live('pagebeforeshow',function(e,data){    
    $('#cars-data').empty();
    $.ajax({
        type: "POST",
        url: "/echo/xml/",
        dataType: "xml",
        data: {
            xml: "<cars><car><name>TOYOTA</name><country>JAPAN</country><pic>http://1call.ms/Websites/schwartz2012/images/toyota-rav4.jpg</pic><description>Toyota has announced that it will recall a total of 778,000 units that may have been manufactured with improperly-tightened nuts on the rear suspension.</description></car></cars>"
        },
        success: function(xml) {
            ajax.parseXML(xml);
        },
        error: function (request,error) {
            alert('Network error has occurred!');
        }
    });
});

$("#cars").live('pagebeforeshow', function () {
    $("#cars div[data-role='header'] h1").html(carObject.carName);
    $('#car-data').empty();
    $('#car-data').append('<li>Car Type:<span> ' + carObject.carName + '</span></li>');
    $('#car-data').append('<li>Car Country:<span> ' + carObject.carCountry + '</span></li>');        
    $('#car-data').append('<li>Car Description:<span> ' + carObject.description + '</span></li>');    
    $('#car-data').listview('refresh');   
    $('#car-img').attr('src' , carObject.img );    

});

var ajax = {  
    parseXML:function(result){
        $(result).find("car").each(function()
        {
            carObject.carName  = $(this).find('name').text();
            carObject.carCountry  = $(this).find('country').text();
            carObject.img  = $(this).find('pic').text();
            carObject.description  = $(this).find('description').text();

            $('#cars-data').append('<li><a href="#cars"><img src="' + carObject.img + '" title="sample" height="100%" width="100%"/><h3>Car type:<span> '+carObject.carName+'</span></h3><p>' + carObject.description + '</p></a></li>');
        });    
        $('#cars-data').listview('refresh');
        $('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
        $('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
        $('#index').trigger('pagecreate');
    }
}

var carObject = {
    carName : '',
    carCountry : '',
    img : '',
    description : ''    
}