gpt4 book ai didi

Jquery移动: Forcing refresh of content

转载 作者:行者123 更新时间:2023-12-03 21:36:48 25 4
gpt4 key购买 nike

我有一个大问题:我有一个 listview,每个项目都链接到页面 #concorsi。当我单击链接时,URL 会变为 #concorsi?numero=1,因为我正在从 JSON 中获取表单编号 1。

当我第一次点击时一切正常。每个输入都使用 jQuery Mobile 类进行可视化,但如果我返回并进入同一链接后,代码不会刷新。标题很直观,但内容没有。如何强制刷新div内容?

这些是我的 JavaScript 函数:

<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 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.

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.

您还可以像这样刷新 ListView :

$('#mylist').listview('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');

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.

刷新表单元素:

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

radio :

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

选择:

var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

slider :

$("input[type='range']").val(60).slider("refresh");

翻转开关(它们使用 slider ):

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");

可折叠:

$('div[data-role=collapsible]').collapsible();

关于Jquery移动: Forcing refresh of content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8357756/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com