Dynamically creating jQuery Mobile pages using jQuery Templates

Question

I am building a workout catalog using jquery mobile for the UI and jquery templates to deal with the html. I have been able to append html to an already created page AND get jquery mobile to change the markup thanks to the .page() function.

However, I want to be able to create new jq mobile pages. I can inject code into divs with data-role=page, call .page() on it and it's all fine. But appending a fully made page to the body does not work.

EDIT: This question and my answer refers to jquery mobile alpha 3

Answer 1

Ok I got it. If you want to add a to the DOM you have to also add a value for data-url. When you create a static html page,

<div data-role="page" id="home">

jQuery mobile automatically adds a data-url equal to the id you give it. When you do it yourself, you have to hold its hand and pass it a data-url="home".

When you generate your html string append it to $.mobile.pageContainer so jQuery Mobile knows where to find it (appending it to the body works also, but it's probably best not to rock the boat). After that, call .page() on your page in the DOM so that jQuery mobile does all of its magical <span> magic to make it pretty.

$('#home').page();

Answer 2

Gravedigging this thread. Using the jquery mobile (1.1.0), this was working for me, .trigger("create") ...

    content = '<div data-role="page" id="myID" data-url="myID">'
    // ...
    $('body').append(content).trigger("create")
    $("<a href='#myID' data-rel='dialog'/>").trigger("click")

Answer 3

when you call $('#home').page(); you're asking jQuery to enhance your div with the page's specific stylesheet and the js functions. The page is already present in the DOM, but to show it you must call $.mobile.changePage("#home",options) . for more information (and object-specific options), see http://jquerymobile.com/test/docs/api/methods.html