JQM (jQueryMobile) problem with AJAX content listview('refresh') not working

问题

This is a mock of what I'm doing:

function loadPage(pn) {
    $('#'+pn).live('pagecreate',function(event, ui){
        $('#'+pn+'-submit').click( function() {
            $.mobile.changePage({
                    url: 'page.php?parm=value', 
                    type: 'post', 
                    data: $('form#'+pn+'_form')
                },'slide',false,false);

            loadAjaxPages(pn);
        });
});

function loadAjaxPages(page) {
    // this returns the page I want, all is working
    $.ajax({
        url: 'page.php?parm=value',
        type: 'POST',
        error : function (){ document.title='error'; }, 
        success: function (data) {                  
            $('#display_'+page+'_page').html(data); // removed .page(), causing page to transition, but if I use .page() I can see the desired listview
        }
    });
}

in the ajax call return if I add the .page() (which worked in the past but I had it out side of the page function, changing the logic on how I load pages to save on loading times), make the page transition to the next page but I can see the listview is styled the way I want:

$('#display_'+page+'_page').html(data).page();

Removing .page() fixes the transition error but now the page does not style. I have tried listview('refresh') and even listview('refresh',true) but no luck.

Any thoughts on how I can get the listview to refresh?

Solution:

$.ajax({
    url: 'page.php?parm=value',
    type: 'POST',
    error : function (){ document.title='error'; }, 
    success: function (data) {                  
        $('#display_'+page+'_page').html(data);
        $("div#name ul").listview(); // add div wrapper w/ name attr to use the refresh
    }
});

回答1:

Be sure to call .listview on the ul element
If it didn't style earlier, you just call .listview(), bot the refresh function. If your firebug setup is correct, you should have seen an error message telling you that.

I didn't have time to get down to creating some code before you posted your fix, but here's a little recommendation from me:

if(data !== null){ $('#display_'+page+'_page').html(data).find("ul").listview() }

This is a bit nicer than a new global selector. Also - you don't need the div and you can provide a detailed selector if you have multiple ULs.

caution: the above code requires data !== null. If it's null - it will throw an error.

回答2:

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.

more info here.

来源：https://stackoverflow.com/questions/5597036/jqm-jquerymobile-problem-with-ajax-content-listviewrefresh-not-working

标签

ajax

listview

jquery

jquery-mobile