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

Question

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

Got your message to check this out, but I see you have the solution now. :) — CRice, Apr 11 '11 at 23:18
Here is my question http://stackoverflow.com/questions/5589358 if anyone needs more info on this. — CRice, Apr 11 '11 at 23:29

naugtur · Accepted Answer · 2011-04-11T19:03:43.540

4

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.

edited Apr 11 '11 at 19:03

answered Apr 11 '11 at 07:49

naugtur

16,827
5
70
113

It's just not adding the markup after the ajax call. The only thing that works is page() but then the transition is messed up. Pulling out my hair!!! Also added a name attribute on the UL and called it that way, still no luck – Phill Pafford Apr 11 '11 at 16:59
I got it. Had to call the listview() in the ajax call on the ul element. Had to add a div wrapper and call it like so: $("div#name ul").listview(); – Phill Pafford Apr 11 '11 at 17:37
You did what I expected you will do ;) I edited to give you a little correction there. – naugtur Apr 11 '11 at 19:05

score 0 · Answer 2 · answered Feb 18 '12 at 13:45

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.

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

2 Answers2

Linked