jQuery Mobile:强制刷新内容 [英] Jquery Mobile: Forcing refresh of content
问题描述
我有一个大问题:我有一个listview，每个项目都链接到页面#concorsi.当我单击链接时，URL变为#concorsi?numero=1，因为我正在从JSON中获取表格编号1.
I have a big problem: I have a listview and each item links to page #concorsi. When I click on a link the URL become #concorsi?numero=1 because I'm fetching the form number 1 from a JSON.
当我第一次单击时，一切正常.每个输入都使用jQuery Mobile类可视化，但是如果我返回并进入相同的链接，则代码不会刷新. 标题清晰可见，但内容没有.如何强制刷新div内容?
When I click the first time it's all OK. Each input is visualized with jQuery Mobile classes but if I come back and after go into the same link the code don't refresh. The header is well visualized but the content no. How can I force the refresh of the div content?
这些是我的JavaScript函数:
These are my JavaScript functions:
<script type="text/javascript">
$(document).bind( "pagebeforechange", function( e, data ) {
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if ( typeof data.toPage === "string" ) {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
var u = $.mobile.path.parseUrl( data.toPage ),
re = /^#concorso/;
if ( u.hash.search(re) !== -1 ) {
// We're being asked to display the items for a specific category.
// Call our internal method that builds the content for the category
// on the fly based on our in-memory category data structure.
showConcorso( u, data.options);
// Make sure to tell changePage() we've handled this call so it doesn't
// have to do anything.
e.preventDefault();
}
}
});
</script>
和showConcorso() L
function showConcorso( urlObj, options )
{
document.getElementById('conccont').innerHTML="";
var concorsoNum = urlObj.hash.replace( /.*numero=/, "" ),
// Get the object that represents the category we
// are interested in. Note, that at this point we could
// instead fire off an ajax request to fetch the data, but
// for the purposes of this sample, it's already in memory.
concorso = obj.concorsi[ concorsoNum ],
// The pages we use to display our content are already in
// the DOM. The id of the page we are going to write our
// content into is specified in the hash before the '?'.
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
if ( concorso ) {
// Get the page we are going to dump our content into.
var $page = $( pageSelector ),
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" ),
$footer = $page.children( ":jqmData(role=footer)" );
// Find the h1 element in our header and inject the name of
// the category into it.
$header.find( "h1" ).html(concorso['title']);
markup=document.createElement('form');
markup.setAttribute('action','#home');
markup.setAttribute('method','POST');
markup.id="concForm";
markup.onchange="alert (test)";
items=obj.concorsi[concorsoNum].elementi;
for(field in items) {
nest=items[field];
nest=obj.campi[nest];
switch(nest.type){
case "free": markup.appendChild(createFree(nest));
break;
case "text": markup.appendChild(createText(nest));
break;
case "textarea": markup.appendChild(createTextArea(nest));
break;
case "switch": markup.appendChild(createSwitch(nest));
break;
case "switchcust": markup.appendChild(createSwitchCustom(nest));
break;
case "slider": markup.appendChild(createSlider(nest));
break;
case "select": markup.appendChild(createSelect(nest));
break;
case "checkbox": markup.appendChild(createCheckbox(nest));
break;
case "radio": markup.appendChild(createRadio(nest));
break;
case "reset": markup.appendChild(createButton(nest));
break;
case "submit": markup.appendChild(createButton(nest));
break;
}
}
// Inject the category items markup into the content element.
$content.html( markup );
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// We don't want the data-url of the page we just modified
// to be the url that shows up in the browser's location field,
// so set the dataUrl option to the URL for the category
// we just loaded.
options.dataUrl = urlObj.href;
// Now call changePage() and tell it to switch to
// the page we just modified.
$.mobile.changePage( $page, options );
}
}
推荐答案
刷新页面用户:
.trigger('create');
更多在这里:
创建与刷新:重要区别
请注意，创建事件和刷新方法之间存在重要区别， 一些小部件. create事件适合增强原始标记 包含一个或多个小部件.应该使用刷新方法 在已经被操纵的现有(已经增强)的小部件上 以编程方式，需要更新用户界面以进行匹配.
Create vs. refresh: An important distinction
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.
例如，如果您有一个页面，您在其中动态附加了新的 创建页面后，具有data-role = listview属性的无序列表， 在该列表的父元素上触发创建将对其进行转换 放入列表视图样式的小部件.如果还有更多列表项，那么 以编程方式添加，调用listview的refresh方法将 仅将这些新列表项更新为增强状态，然后将 现有列表项保持不变.
For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.
您还可以像这样刷新列表视图:
You can also refresh the listview like this:
$('#mylist').listview('refresh');
更多在这里:
更新列表
如果将项目添加到列表视图，则需要在其上调用refresh()方法以更新样式并创建任何样式 已添加的嵌套列表.例如:
Updating lists
If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example:
$('#mylist').listview('refresh');
请注意，refresh()方法仅影响附加到节点的新节点. 列表.出于性能原因执行此操作.已经有任何清单项目 增强功能将被刷新过程忽略.这意味着 您可以更改已经增强的列表中的内容或属性 项目，这些将不会得到反映.如果您要更新列表项， 在调用刷新之前，将其替换为新鲜的标记.
Note that the refresh() method only affects new nodes appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh.
刷新表单元素:
刷新表单元素
在jQuery Mobile中，一些增强的表单控件只是样式化(输入)，而其他则是自定义的 控件(选择项，滑块)由以下项构建并与其保持同步: 本机控制.以编程方式更新表单控件 JavaScript，首先处理本机控件，然后使用刷新 告诉增强型控件进行自我更新以匹配新控件的方法 状态.以下是一些有关如何更新常见表单控件的示例， 然后调用刷新方法:
Refreshing form elements
In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the refresh method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the refresh method:
复选框:
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
收音机:
$("input[type='radio']").prop("checked",true).checkboxradio("refresh");
选择:
var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
滑块:
$("input[type='range']").val(60).slider("refresh");
拨动开关(它们使用滑块):
Flip switches (they use slider):
var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");
可折叠:
$('div[data-role=collapsible]').collapsible();
这篇关于jQuery Mobile:强制刷新内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
