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 ?

Thanks

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 ?

Thanks

• javascript
• jquery
• mobile
• jquery-mobile
• web

• I think wich you need execute your ajax function inside a pageshow jMobile event. :] – Rael Max Commented Sep 1, 2011 at 14:53

1 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