jQuery Mobile: how to create dynamic pages from a string template?

Question

Hi to everyone this is my first question in stackoverflow. I'll try to create a Single Page Web App with jQuery Mobile (for the UI) and PhoneGap (because I want it cross-platform). In my app I want to create pages via some templates (string) and, whene i click on a button or a list element, the app create the corresponding page from the template and navigate it by the # attr. Whene I load the template the first time jqm render the page in the right way, but when I remove it from the DOM and append it when I need the page, the jqm don't render the page with its style, but I see only the link (or other elements). Thanks to everyone!

Answer 1

By default jQuery Mobile will auto enhance the appropriate markup on your page, however if you add dynamic content later you will need to manually trigger the create event on your new page.

For example

$('#newPageID').trigger('create');

From the Docs

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

Answer 2

Unfortunately no matter what is said in official jQuery Mobile documentation method .trigger('create') can not restyle full page.

Instead this should be used:

$('#newPageID').trigger('pagecreate');

Here's a working example: http://jsfiddle.net/Gajotres/vN45m/

It can be testes easily, just replace pagecreate with create or comment that full line.