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

Supongo que esto tiene una solución simple.

Tengo una lista que quiero convertir en una vista de lista. Se le agregan cosas dinámicamente.

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 no puede llamar a métodos en listview antes de la inicialización; intentó llamar al método 'actualizar'

Cuando lo cambio a solo $("#friends_list_view ul").listview(); Yo obtengo:

TypeError no detectado: no se puede leer la propiedad 'jQuery16409763167318888009' de undefined

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

prueba sin ul: $("#friends_list_view").listview(); -

@Phill Do dice :( Lo extraño es que funciona con ese código exacto pero con ID diferentes en otra página... -

2 Respuestas

La página con la vista de lista posiblemente no esté inicializada. Intenta llamar a esto primero:

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

Respondido 04 Abr '13, 18:04

jQM PageInit() Documentos:

pageinit
Se activa en la página que se está inicializando, después de que se produzca la inicialización. Recomendamos enlazar a este evento en lugar de DOM ready() porque esto funcionará independientemente de si la página se carga directamente o si el contenido se extrae a otra página como parte del sistema de navegación Ajax.

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.