CODEWITHSUNDEEP
jqueryhtmllistviewjquery-mobile
JoshDG
JoshDG

Reputation: 3931

jQuery Mobile List View: initialize error

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

Upvotes: 4

Views: 4692

Answers (2)

peter_drualas
peter_drualas

Reputation: 96

The page with the listview possibly isn't initialized. Try to call this first:

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

Upvotes: 6

Phill Pafford
Phill Pafford

Reputation: 85318

jQM PageInit() Docs:

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:

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

Upvotes: 3

Related Questions