jQuery Mobile: Error on Listview refresh

Question

I've seen a lot of people with this issue, but for some reason I am unable to find a solution that works.

I'm getting this error:

Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

Here's the breakdown of what is happening.

I'm binding this event:

$('#person').bind('pagebeforeshow', function(e, data){
    Person.getPersonData();
});

In the getPersonData() method, I'm using the underscore _.after function to render a template and refresh three listviews after all my ajax calls have been made. I'm using Knockout.js to apply some data bindings.

var tmplMarkup = $('#tmpl-person').html();
var compiledTmpl = _.template( tmplMarkup, {data: Person.data} );
$('#person-wrapper').html(compiledTmpl);
$('#person-info-wrapper').listview('refresh');
$('#person-related-wrapper').listview('refresh');
$('#person-groups-wrapper').listview('refresh');
$('#person-notes-wrapper').listview('refresh');
ko.applyBindings(Person.data, document.getElementById('person-notes-form'));

I'm not sure what I'm doing wrong here. I've tried binding to different page loading events, and no luck. I've even tried using setTimeOut to refresh the list views several seconds after the ajax calls are made, but that did not help either.

Thanks in advance.

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

This problem can be easily solved.

Use this:

$('#listview-id').listview().listview('refresh');

Where #listview-id is your listview id (or any other reference), first listview() will initialize it and a second one will refresh it.

If you want to find more about this problem you can find it in this ARTICLE, to be honest it is my personal blog article. Or find it HERE. Look for the chapter called: Markup enhancement problems

edited May 23 '17 at 11:49

Community

1
1

answered Mar 01 '13 at 20:52

Gajotres

57,309
16
102
130

1

Interesting. Thanks very much! – Mar 06 '13 at 19:46
@Gajotres your blog article is unreachable now. – netalex Jun 27 '13 at 08:11
@netalex tnx for the info, my VPS is under maintenance. It will be available during the day. – Gajotres Jun 27 '13 at 10:32

score 1 · Answer 2 · answered Mar 01 '13 at 20:54

1

try as below

$('#person-info-wrapper ul').listview();
$('#person-related-wrapper ul').listview();
$('#person-groups-wrapper ul').listview();
$('#person-notes-wrapper ul').listview();

answered Mar 01 '13 at 20:54

Jay Mayu

17,023
32
114
148

jQuery Mobile: Error on Listview refresh

2 Answers2