[英]Refresh page after AJAX request in jQuery Mobile
I have the following jQueryMobile page anatomy at index.html: 我在index.html上具有以下jQueryMobile页面结构:
<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. 我有兴趣通过AJAX将其他页面(没有这种结构)加载到data-role="content"
,以便在所有页面上使用相同的页眉和页脚。
The code bellow works fine but doesn't refresh the elements with jQueryMobile styles. 下面的代码可以正常工作,但是不能使用jQueryMobile样式刷新元素。
$( 'div:jqmData(role="content")' ).load( 'pages/home.html' );
All you need to do is tell the jQuery Framework to initialize the new widgets: 您需要做的就是告诉jQuery Framework初始化新的小部件:
$( '.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 另外,如果您想要的只是一个持久的页眉/页脚,那么您应该只检查一下jQuery Mobile具有的功能: http : //jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/footer- persist-b.html
Here is a demo: http://jsfiddle.net/VMhz4/1/ 这是一个演示: http : //jsfiddle.net/VMhz4/1/
You can dynamically add data-role="button"
to links like this if you need: 您可以根据需要将data-role="button"
动态添加到这样的链接中:
$( '.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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.