jQuery Mobile List View: initialize error

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

@Phill Do dice :( The weird thing is that it works with that exact code but different ids on another page... — JoshDG
– JoshDG, Commented Mar 9, 2012 at 16:27

peter_drualas · Accepted Answer · 2013-04-04 17:21:47Z

6

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

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

answered Apr 4, 2013 at 17:21

peter_drualas

961 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephen Fuhry · Accepted Answer · 2012-07-13 15:52:11Z

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>

Collectives™ on Stack Overflow

jQuery Mobile List View: initialize error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related