Jquery Mobile:强制刷新内容

前端之家收集整理的这篇文章主要介绍了Jquery Mobile:强制刷新内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个大问题:我有一个列表视图,每个项目链接页面#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');

更多在这里:

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

您也可以刷新列表视图:

$('#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:

06001

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

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

翻转开关(他们使用滑块):

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");
原文链接:https://www.f2er.com/jquery/183384.html

猜你在找的jQuery相关文章