Jquery Mobile：强制刷新内容

Jquery Mobile: Forcing refresh of content

提问by Oniz

I have a big problem: I have a listviewand each item links to page #concorsi. When I click on a link the URL become #concorsi?numero=1because I'm fetching the form number 1 from a JSON.

我有一个大问题：我有一个listview，每个项目都链接到 page #concorsi。当我点击一个链接时，URL 变成了#concorsi?numero=1因为我从 JSON 中获取了表单编号 1。

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?

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

These are my JavaScript functions:

这些是我的 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>

And showConcorso()L

和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 );
    }
}

回答by Phill Pafford

To refresh the page user:

刷新页面用户：

.trigger('create');

More Here:

更多在这里：

• http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

• http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

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.

创建与刷新：一个重要区别
请注意，某些小部件具有的创建事件和刷新方法之间存在重要区别。create 事件适用于增强包含一个或多个小部件的原始标记。refresh 方法应该用于以编程方式操作并需要更新 UI 以匹配的现有（已经增强的）小部件。

例如，如果您有一个页面，在该页面创建后动态附加了一个具有 data-role=listview 属性的新无序列表，则在该列表的父元素上触发 create 会将其转换为列表视图样式的小部件。如果然后以编程方式添加更多列表项，则调用列表视图的 refresh 方法将仅将那些新列表项更新为增强状态，并保持现有列表项不变。

You can also refresh the listview like this:

您还可以像这样刷新列表视图：

$('#mylist').listview('refresh');

More Here:

更多在这里：

• http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html

• http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html

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.

更新列表
如果向列表视图添加项目，则需要对其调用 refresh() 方法以更新样式并创建添加的任何嵌套列表。例如：

$('#mylist').listview('refresh');

请注意，refresh() 方法仅影响附加到列表的新节点。这样做是出于性能原因。刷新过程将忽略任何已增强的列表项。这意味着如果您更改已经增强的列表项的内容或属性，这些将不会被反映。如果要更新列表项，请在调用 refresh 之前将其替换为新标记。

Refreshing Form Elements:

刷新表单元素：

• http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html

• http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html

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:

刷新表单元素
在 jQuery Mobile 中，一些增强的表单控件只是简单的样式化（输入），而其他的则是自定义控件（选择、滑块），它们是从原生控件构建的，并与原生控件保持同步。要使用 JavaScript 以编程方式更新表单控件，首先操作本机控件，然后使用 refresh 方法告诉增强控件更新自身以匹配新状态。下面是一些如何更新常用表单控件的示例，然后调用 refresh 方法：

Checkboxes:

复选框：

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

Radios:

收音机：

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

Selects:

选择：

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

Sliders:

滑块：

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

Flip switches (they use slider):

翻转开关（它们使用滑块）：

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

Collapsible:

可折叠：

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