JQuery Mobile List View: initialize error

Question

I guess this has a simple solution.

I have a list that I want to list. Material is added to it dynamically.

HTML:

<div data-role="content" data-theme="b" class="content-primary"> <div id="friends_list_view" class="content-primary" data-theme="c"> <ul data-role="listview" data-filter="true" data-theme="c"> </ul> </div> </div> 

JQuery

 for(i in names){ listString = '<li><a href="#">'+i+'</a></li>'; $("#friends_list_view ul").append(listString); } $("#friends_list_view ul").listview('refresh'); $.mobile.hidePageLoadingMsg(); $.mobile.changePage( "#friends", { transition: "slide"} ); 

I get:

It is not possible to call methods in a list view before initialization; tried to call the 'refresh' method

When I change it to $("#friends_list_view ul").listview(); , I get:

Uncaught TypeError: Cannot read property 'jQuery16409763167318888009' from undefined

Answer 1

jQM PageInit () Docs:

• http://jquerymobile.com/test/docs/api/events.html

pageinit
Launched on the initialized page after initialization. We recommend binding this event instead of DOM ready (), because it will work regardless of whether the page loads directly or if the content is inserted into another page as part of the Ajax navigation system.

Try the following:

• http://jsfiddle.net/GVCHF/

Js

 $( '#home' ).live( 'pageinit',function(event){ var names = ['Bob','Bill','Phill','Will']; var listString = ''; for(i in names) { listString += '<li><a href="#">'+i+'</a></li>'; } $("#friends_list_view ul").append(listString); $("#friends_list_view ul").listview('refresh'); $.mobile.hidePageLoadingMsg(); $.mobile.changePage( "#friends", { transition: "slide"} ); }); 

HTML

 <div data-role="page" id="home"> <div data-role="content" data-theme="b" class="content-primary"> <div id="friends_list_view" class="content-primary" data-theme="c"> <ul data-role="listview" data-filter="true" data-theme="c"> </ul> </div> </div> </div>​ 

Answer 2

The list page may not be initialized. Try to do it first:

 $('#pageWithListview').page();