How can I manually trigger page creation with jQuery Mobile?

Question

I'm using an MVC js lib (emberjs) which will dynamically create and change pages (views). How can I manually trigger page creation with jQuery Mobile?

Here's my jsFiddle - http://jsfiddle.net/mattkime/Aczye/3/

A jQuery Mobile page with headers and footers is created. After a setTimeout of 1 second that page is removed from the DOM and new content is inserted but fails to display. You'll see my failed code.

(note, routing is turned off as its handled by ember)

How do i get the new markup to be displayed as a jQuery Mobile enhanced page?

Code:

/** disables jQM routing **/
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
});

// removes hidden pages
$('div[data-role="page"]').live('pagehide', function (event, ui) {
    $(event.currentTarget).remove();
});


var pageTwo = '<div id="pageTwo" data-role="page"><div data-role="header"><h1>header2</h1></div> <div data-role="content">...</div><div data-role="footer" data-position="fixed"><h1>footer2</h1></div></div>';

setTimeout(function(){
    $('#pageOne').remove();
    $('body').append(pageTwo);
    $('#pageTwo').page();
    //alert($('#pageTwo').length);
    //$.mobile.changePage($('#pageTwo'));
},1000);

Kevin B · Answer 1 · 2012-08-14T20:49:56.057

Don't remove page 1, otherwise it won't be possible to transition from it to page 2.

http://jsfiddle.net/Aczye/4/

/** disables jQM routing **/
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
});

// removes hidden pages
$(document).delegate('div[data-role="page"]', 'pagehide', function (event, ui) {
    $(event.currentTarget).remove();
});


var pageTwo = '<div id="pageTwo" data-role="page"><div data-role="header"><h1>header2</h1></div> <div data-role="content">...</div><div data-role="footer" data-position="fixed"><h1>footer2</h1></div></div>';

setTimeout(function(){
    //$('#pageOne').remove();
    $('body').append(pageTwo);
    $.mobile.changePage("#pageTwo");
    //alert($('#pageTwo').length);
    //$.mobile.changePage($('#pageTwo'));
},1000);

Edit: updated to using .delegate for futureproofing. left .bind due some jQuery mobile versions still requiring older versions of jquery.

How can I manually trigger page creation with jQuery Mobile?

1 Answers1