jQuery Mobile .listview ('refresh') non funziona

Question

Sto costruendo un'app Web mobile con jQuery Mobile e ho un problema. Sto usando jQuery per analizzare un file XML e creare elementi di elenco. Costruisce l'elenco, quindi applica l'elenco di <li> s allo <ul> nella pagina. Ho letto che per ottenere il corretto design della lista devi chiamare .listview('refresh') dopo aver aggiunto i dati per aggiornare l'elenco in modo che jQuery Mobile possa impostare lo stile corretto nella lista.

Il mio problema è che la lista non si aggiorna mai. Continua a essere stilizzato in modo errato. Sto facendo qualcosa di sbagliato? Il mio codice è corretto? Cordiali saluti, ho provato tutti i tipi di variazioni di .listview(), .listview('refresh'), ecc

CODICE:

<script type="text/javascript"> 
    $(window).load(function() { 
    $.ajax({ 
     type: "GET", 
     url: "podcast.xml", 
     dataType: "xml", 
     async: false, 
     success: parseXml 
    }); 
    }); 

    function parseXml(xml) { 
    var podcastList = ""; 
    $(xml).find("item").each(function() { 
     podcastList += "<li class='ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c' role='option' data-theme='c'><img src='" + $(this).find("itunes\\:image").attr("href") + "' class='ui-li-thumb'><h3 class='ui-li-heading'><a href='" + $(this).find("enclosure").attr("url") + "' class='ui-link-inherit'>" + $(this).find("title").text() + "</a></h3><p class='ui-li-desc'>" + $(this).find("itunes\\:subtitle").text() + "</p></li>"; 
    }); 
    $("#podcastList").append(podcastList); 
    $("#podcastList").listview('refresh'); 
    } 
</script> 

Grazie!

Answer 1

Mi sono imbattuto in questo problema con codice simile al tuo. La mia soluzione era di inserire l'aggiornamento nell'opzione $ .ajax "completa".

 complete: function() { 
      $('#list-id').listview('refresh'); 
     } 

Answer 2

Il tuo codice mi sembra buono ... Sembra quasi esattamente quello che ho nella mia app.

Forse il problema sta nel codice HTML? Dovrebbe assomigliare a:

<div data-role="page" data-theme="b" id="my-page"> 
    <div data-role="header"> 
     <h1>Podcast List</h1> 
    </div> 
    <div data-role="content"> 
     <ul id="podcastList" data-role="listview"> 
     </ul> 
    </div> 
</div> 

Answer 3

La mia soluzione era quella di utilizzare alcun parametro nel metodo listview come in

<div data-role="page" id="playlist"> 
    <div data-role="header"> 
     <h1>my playlist</h1> 
     <a href="index.html" data-icon="arrow-l">Back</a> 
    </div> 
    <div data-role="content"></div> 
</div> 

fine poi ..

$('#playlist').bind('pageshow', function() { 
    doOnCallBack = function(){ 
     $('#playlist').find('[data-role="listview"]').listview(); 
    } 
    ajaxGet('${genSecureLink(action:'updatePlaylistTemplate',controller:'ajaxActionsPd',absolute:'true')}',$('#playlist').find('[data-role="content"]'),doOnCallBack); 
}); 

qui è la mia funzione ajaxGet:

function ajaxGet(url,target,doOnCallBack){ 
    $.ajax({ 
     url: url, 
     error:function(x,e){handleAjaxError(x,e);}, 
     beforeSend:function(){$.mobile.showPageLoadingMsg();}, 
     complete:function(){$.mobile.hidePageLoadingMsg();doOnCallBack();}, 
     success:function(data, textStatus, jqXHR){target.html(data);} 
    }); 
} 

Answer 4

La risposta di Spike ha funzionato per me - ero ta rgeting del div genitore dell'ul Ho anche bisogno di impegnare la funzione di Ajax per pagecreate - che è:

<div data-role="page" data-theme="b" id="my-page"> 
    <div data-role="header"> 
     <h1>Podcast List</h1> 
    </div> 
    <div data-role="content"> 
     <ul id="podcastList" data-role="listview"> 
     </ul> 
    </div> 
</div> 
<script> 
$('#mypage').bind('pagecreate',function(){ 
    // instead of $(window).load(function(){ 
     $.ajax({ 
      type: "GET", 
      url: "podcast.xml", 
      dataType: "xml", 
      async: false, 
      success: parseXml 
      complete: function() { 
       $('#podcastList').listview('refresh'); 
      } 
     }); 
}); 
</script> 

Answer 5

$("#podcastList").trigger("create");