jQuery Mobile .listview ('refresh') ne fonctionne pas

Question

Je crée une application web mobile avec jQuery Mobile et j'ai un problème. J'utilise jQuery pour analyser un fichier XML et créer des éléments de liste. Il construit la liste, puis ajoute cette liste de <li> au <ul> sur la page. J'ai lu que pour que la liste soit stylée correctement, vous devez appeler .listview('refresh') après avoir ajouté les données pour actualiser la liste afin que jQuery Mobile puisse définir le style correct pour la liste.

Mon problème est que la liste ne s'actualise jamais. Il continue à se dénommer incorrectement. Est-ce que je fais quelque chose de mal? Est-ce que mon code est correct? Pour votre information, je l'ai essayé toutes sortes de variations de .listview(), .listview('refresh'), etc.

CODE:

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

Merci!

Answer 1

J'ai rencontré ce problème avec un code semblable au vôtre. Ma solution consistait à placer l'actualisation dans l'option $ .ajax "complete".

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

Answer 2

Votre code me semble bon ... ressemble presque exactement à ce que j'ai dans mon application.

Peut-être que le problème réside dans votre HTML? Il devrait ressembler à quelque chose comme:

<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

Ma solution était d'utiliser aucun paramètre dans la méthode listview comme dans

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

fin puis ..

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

ici est ma fonction 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 réponse de Spike a fonctionné pour moi - j'étais ta rgeting div div de l'UL. J'ai aussi besoin de lier la fonction ajax à pagecreate - qui est:

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