jQuery mobile error "cannot call methods on listview prior to initialization"

Question

I'm dynamically filling a <ul data-role="listview"> then calling location.href="#Results" where the list is, and finally listview('refresh').

All that is done in the success callback of an Ajax request from the same page. It works more or less but I'm getting the following error:

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

I guess jQuery mobile did not construct the listview yet. What could I do?

Motherless

Answer 1

http://jquerymobile.com/demos/1.1.0/docs/api/events.html You have to hook on the pageinit event. You can't call any JQM methods prior to this. i.e.:

$('#Results').bind('pageinit', function() {
  $('#myListview').listview('refresh');
});

Pinchcock

@user1656416 #Results is the jQuery Mobile page id. More info here: jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html. – Reitz

After trying what was suggested in this error my page now does not show up. It gets rid of the error, but the page i am binding the refresh to will not show. – Franzen

Answer 2

Just call the listview method without any parameter first:

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

Solution taken from http://www.gajotres.net/uncaught-error-cannot-call-methods-on-prior-to-initialization-attempted-to-call-method-refresh/

Pressing

whoa! worked for me after an hour of banging my head against the wall. – Diatom

same for me: in JQM 1.4.5, I tried to create a dynamic popup when clicking on an event in a FullCalendar... For future users who find this thread: I used the following code eventClick: function(calEvent, jsEvent, view) { var $popup = $('<div data-role="popup" id="eventPopup">testPopup</div>').appendTo('[data-role="content"]'); $('#eventPopup').popup().popup("open"); } – Emelinaemeline

@Diatom and intrixius I'm glad I saved your head from getting major damage. :-) – Pressing

wow..this solution also worked on my reflow table woes. $(".my-table").table().table("refresh"); – Dendy

Answer 3

you should check if it is already initialized or not, refresh the list in case it is initialized otherwise trigger create as per the following :

if ( $('#myListview').hasClass('ui-listview')) {
    $('#myListview').listview('refresh');
     } 
else {
    $('#myListview').trigger('create');
     }

Joshua

Answer 4

I had the same error. I solved it by adding ":visible" to my query, so it will only run if the list is visible.

So your code will look something like this:

$('#myListview:visible').listview('refresh');

Worked fine for me!

Intuition

Had a problem similar to this one, and you answer help! Thanks – Selfimmolation

Answer 5

use $.mobile.changePage("#Results"); instead of location.href
actually location.href reload the page so the list view gets destroy

And then listview.refresh

Graiggrail

This was a really great idea. Thank you Ashish. – Quitt

Answer 6

simply add listview.refresh works fine for me,and I'm using ajax to load content into the div too.

document.getElementById("myListview").innerHTML = xmlhttp.responseText;
//works fine on my work
$('#myListview').listview('refresh');

here if my post.

jquery mobile ajax load content into a div element will lose it's css style

I spend almost 3 hours to solve my post probem.finaly find the answer here.thanks.

Recombination

Answer 7

This is what worked for me:

   $(document).delegate('#Results', 'pageshow', function (){
   $('#mylistview').listview('refresh').trigger('create'); 
   });

Atwood