Question

I have this error:

I have Multipage in jQuery Mobile, and I work in the main page, and load data dynamically in the second page (data-role=page) into a <ul data-role="listview">... </ul>, and then this page is shown perfectly. Here in the second page, when I want to change to the main page and return and do the same, the list <ul ...> isn’t refreshed. The first one works, but the second, when I return again, isn’t refreshed.

The code is:

<div data-role="page" id="uno">

  <a href="#" onClick="LoadDataInto_MyUL_ListL();$.mobile.changePage('#dos');">

</div>

<div data-role="page" id="dos">
  <a href="#" onclick="$.mobile.changePage('#uno');" >Return</a>

  <ul data-role="listview" id="MyUL_List">
  </ul>

</div>

Inside LoadDataInto_MyUL_ListL();, I have $('#MyUL_List').html("<li>...</li>"), and firstly I had too $('#MyUL_List').listview('refresh'), but I had this error:

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

and I remove refresh, but without this error, listview doesn’t refresh.

How do I fix this problem?

Answer 1

Sometimes you need to initialize a jQuery Mobile widget before using it.

It can be initialized like this:

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

The same thing stands for other jQuery Mobile elements.