jQuery Mobile .listview ('refresh') no funciona

Question

Estoy creando una aplicación web móvil con jQuery Mobile y tengo un problema. Estoy usando jQuery para analizar un archivo XML y crear elementos de lista. Construye la lista, luego aplica esa lista de <li> al <ul> en la página. Leí que para que la lista tenga el estilo correcto, debe llamar al .listview('refresh') después de agregar los datos para actualizar la lista, de modo que jQuery Mobile pueda configurar el estilo correcto para la lista.

Mi problema es que la lista nunca se actualiza. Sigue recibiendo un estilo incorrecto. ¿Estoy haciendo algo mal? ¿Mi código es correcto? Para su información, he intentado todo tipo de variaciones de .listview(), .listview('refresh'), etc.

CÓDIGO:

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

Gracias!

Answer 1

Me encontré con este problema con un código similar al suyo. Mi solución fue colocar la actualización en la opción "completa" de $ .ajax.

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

Answer 2

Su código se ve bien para mí ... Se ve casi exactamente como lo que tengo en mi aplicación.

¿Tal vez el problema radica en su HTML? Debería verse algo como:

<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

Mi solución fue usar ningún parámetro en el método de vista de lista como en

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

final, entonces ..

$('#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); 
}); 

aquí es mi función 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 respuesta de Spike funcionó para mí, yo era ta rgeting div padre de la ul También necesitaba para unirse a la función ajax pagecreate - es decir:

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