Question

I have the following jQueryMobile page anatomy at index.html:

<div data-role="page"> 
    <div data-role="header">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer">...</div> 
</div> 

I’m interested in loading the other pages (that don’t have this anatomy) to data-role="content" through AJAX in order to use the same header and footer accross all the pages.

The code bellow works fine but doesn’t refresh the elements with jQueryMobile styles.

$( 'div:jqmData(role="content")' ).load( 'pages/home.html' );

Answer 1

All you need to do is tell the jQuery Framework to initialize the new widgets:

$( '.ui-content' ).load( 'pages/home.html', function () { $(this).trigger('create') });

Also, if all you want is a persistent header/footer then you should check-out just that feature that jQuery Mobile has: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/footer-persist-b.html

Here is a demo: http://jsfiddle.net/VMhz4/1/

Update

You can dynamically add data-role="button" to links like this if you need:

$( '.ui-content' ).load( 'pages/home.html', function () {

    //after the AJAX request has resolved and the HTML has been added to the DOM, this will run

    //find all the links that were just added to the DOM and add the `data-role="button"` attribute to each,
    //then end the current selection (returning to `$(this)`) and initialize all widgets
    $(this).find('a').attr('data-role', 'button').end().trigger('create');
});