Jquery Mobile：强制刷新内容

Question

Jquery Mobile：强制刷新内容

25

我有一个大问题：我有一个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 );
    }
}

- Oniz

这个问题也与以下相关：http://stackoverflow.com/questions/8946622/jquery-mobile-1-0-how-to-enhance-page-more-then-one-time/15302836#15302836 - tybro0103

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phill Pafford · Accepted Answer

刷新页面用户：

.trigger('create');

更多内容：

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

注意，创建事件和刷新方法之间有重要区别，这适用于某些小部件。创建事件适用于增强包含一个或多个小部件的原始标记。刷新方法应该用于已经增强的、已经通过编程方式操作并需要更新UI以匹配的小部件。例如，如果您有一个页面，在页面创建后动态添加了一个新的未排序列表（带有data-role=listview属性），在该列表的父元素上触发create将把它转换为样式化的小部件。如果随后编程方式添加了更多的列表项，则调用listview的refresh方法将仅更新那些新的列表项以增强状态，并保留现有的列表项不变。您也可以像这样刷新列表视图：

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

更多内容请见：

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.

刷新表单元素：

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

在jQuery Mobile中，一些增强的表单控件仅仅是样式化的（输入框），但其他一些是自定义控件（选择器、滑块），由本地控件构建并保持同步。要使用JavaScript编程更新表单控件，请先操作本地控件，然后使用刷新方法告诉增强控件更新自身以匹配新状态。以下是如何更新常见表单控件，然后调用刷新方法的示例：

复选框：

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

翻转开关（使用滑块）：

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

可折叠：

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