admin 管理员组

文章数量: 1086019

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' );

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' );
  • javascript
  • jquery
  • ajax
  • jquery-mobile
Share Improve this question edited Apr 5, 2012 at 20:10 Diogo Cardoso asked Apr 3, 2012 at 17:30 Diogo CardosoDiogo Cardoso 22.3k26 gold badges102 silver badges138 bronze badges 3
  • is pages/home.html a full page with <html>, <head> and <body> tags? – Alexander Commented Apr 3, 2012 at 17:34
  • No, contains only the specific HTML of the page. – Diogo Cardoso Commented Apr 3, 2012 at 17:37
  • the styles of pages/home.html are different and not contain in the ones of index.html? AFAIK, putting all the css in index.html would be enough. – Alexander Commented Apr 3, 2012 at 17:43
Add a ment  | 

1 Answer 1

Reset to default 7

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./demos/1.1.0-rc.1/docs/toolbars/footer-persist-b.html

Here is a demo: http://jsfiddle/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');
});

本文标签： javascriptRefresh page after AJAX request in jQuery MobileStack Overflow

版权声明：本文标题：javascript - Refresh page after AJAX request in jQuery Mobile - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744074863a2529161.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。