Vista de lista de jQuery Mobile: error de inicialización

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"} );

Yo obtengo:

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(); Yo obtengo:

Uncaught TypeError: Cannot read property 'jQuery16409763167318888009' of undefined

preguntado el 09 de marzo de 12 a las 15:03

try without the ul: $("#friends_list_view").listview(); -

@Phill Do dice :( The weird thing is that it works with that exact code but different ids on another page... -

2 Respuestas

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

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

Respondido 04 Abr '13, 18:04

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.

Prueba esto:

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

Respondido 13 Jul 12, 16:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.