Force jquery-mobile initialization?

Question

I'm developing a web site with jquery-mobile. My main page displays a list of items, but I catch those items with an ajax function, and then build HTML document in JavaScript

The problem is that jQuery-Mobile initialize the page before I can modify the page, so the page doesn't look in jqm style. How can I force jqm to 'rebuild' the page after my modifications?

Answer 1

If you want to be able to adjust the DOM before the JQuery Mobile initialization occurs I suggest you do the following:

$('#YourPagesId').live('pagebeforecreate',function(event){
  // All of your DOM modification goodness here.
});

If you want to modify the DOM after the initial JQuery Mobile initialization has occurred then you would need to fire the appropriate event.

(The examples below are with a list view)

On creation of a new list view do the following:

$('#ListViewsId').listview();

If you are just modifying an already initialized listview do this:

$('#ListViewsId').listview('refresh');

More information about the available event like 'pagebeforecreate' can be found here: JQuery Mobile Events

More informration on how to initialize and refresh a JQuery Mobile Widget can be found here: Create vs. refresh: An important distinction