Question

I assume this has a simple solution.

I have a list that I want to make into a listview. Stuff 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:

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

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

Uncaught TypeError: Cannot read property ‘jQuery16409763167318888009’
of undefined

Answer 1

jQM PageInit() Docs:

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

pageinit
Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of
DOM ready() because this will work regardless of whether the page is
loaded directly or if the content is pulled into another page as part
of the Ajax navigation system.

Try this:

• 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>​