jQuery移动弹出动态内容不刷新
jQuery Mobile popup dynamic contents are not refreshed
我有一个跨多个页面的通用JQM弹出窗口。从每个页面中,使用页面中的数据刷新弹出窗口的内容。在第一次加载页面时,我可以在弹出窗口上看到刷新的内容。然而,当我加载新的数据到弹出div,我仍然得到旧的数据弹出窗口小部件。
如果我检查弹出窗口的innerHTML,它会给我新的内容,但不能在弹出窗口上看到它们。
下面是我的示例代码: <body>
<div id="common-popup">
<div id="data-popup" data-role="popup">';
<p>Name: N/A<p>
<p>DOB: N/A <p>
</div> <!--Popup div ends -->
</div>
<div data-role="page" id="page1">
<input type='text' id='p1_name' value=''>Name: </input>
<input type='text' id='p1_dob' value=''>DOB: </input>
<button class="update-data" id="b1"/>
<a href="#data-popup"> Watch Data </a>
</div>
<div data-role="page" id="page2">
<input type='text' id='p2_name'>Name: </input>
<input type='text' id='p2_dob'>DOB: </input>
<button class="update-data" id="b2"/>
<a href="#data-popup"> Watch Data </a>
</div>
</body>
<script type="text/javascript">
$('.update-data').on('vclick', function(){
var id = $(this).id;
id = id.split('');
var htm = '<div id="data-popup" data-role="popup">';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
$('#common-popup').html(htm).trigger('create');
});
</script>
在上面的代码中,如果我使用
检查innerHTML:console.log("Common Inner Html: " + document.getElementById(' Common -popup').innerHTML);
我可以看到更新的内容,但是当我打开小狗,我仍然看到旧的内容。请告诉我如何刷新弹出窗口的内容
JS Fiddle: http://jsfiddle.net/bhavik89/49QwL/1/
在Fiddle中,我只能看到初始内容,它们不会在更新
与其把弹出框放在div中,不如把它放在body下面。然后,当重新创建它时,将顶层的DIV留在那里,只替换内容:
<div id="data-popup" data-role="popup" data-theme="a" >
<div >
<p>Name: N/A</p>
<p>DOB: N/A </p>
</div>
</div>
确保你的链接有data-rel="popup":
<a href="#data-popup" data-rel="popup"> Watch Data </a>
给你的更新按钮一些文本,这样我们可以看到按钮:
<button class="update-data" id="b1" >Update</button>
初始化文档上的弹出窗口,然后在更新按钮上单击,替换弹出窗口的HTML,调用enhanceWithin(),最后调用popup("refresh")来更新弹出窗口小部件:
$(function(){
$("#data-popup").enhanceWithin().popup();
});
$(document).on("pagecreate", "#page1", function(){
$('.update-data').on('vclick', function(){
var id = $(this).prop("id");
id = id.split('');
var htm = '<div>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>DOB: ' + $('#p' + id[1] + '_dob').val() +'<p>';
htm += '</div>';
$("#data-popup").html(htm).enhanceWithin().popup("refresh");
});
});
这是一个工作的DEMO
相关文章:
- Spring MVC Ajax请求刷新动态表
- 如何在页面刷新后保留动态创建的html元素及其数据/值
- 弹出窗口中的内容不会刷新.如何使动态
- 如何刷新CSS,以便动态生成的元素可以被设置样式
- 动态更改的下拉列表不会刷新.(雾虫)
- 在jqgrid编辑中动态刷新多选下拉列表
- 如何动态设置填充并在不刷新的情况下显示它
- 如何在动态表更新后刷新整个表排序缓存
- 谷歌DFP动态广告刷新-是否有回调来确定广告是否已加载
- 添加<tr>元素到动态表,动态不刷新页面,php-jquery
- 使用php和ajax动态刷新表格
- 动态更新/刷新 KmlLayer
- 动态添加元素时刷新 HTML
- 动态添加按钮后刷新 jQm 标头
- 将元素附加到动态列表,但浏览器不会刷新 UI
- 附加 html 和动态刷新
- 如何在不刷新的情况下删除动态创建的表行(最好使用标准的向左滑动动画)
- jQuery动态内容链接通过php从SQL数据库加载URL,但在刷新时不会加载
- jQuery-UI选项卡不刷新动态内容
- 在页面之间导航时,在JQM中刷新动态列表视图