jQuery Mobile .listview ("odśwież") nie działa

Question

Buduję mobilną aplikację internetową z jQuery Mobile i mam problem. Używam jQuery do parsowania pliku XML i tworzenia elementów listy. Tworzy listę, a następnie dodaje listę <li> s do <ul> na stronie. Przeczytałem, że aby uzyskać poprawny styl listy, musisz zadzwonić pod numer .listview('refresh') po dodaniu danych, aby odświeżyć listę, aby jQuery Mobile mogła ustawić poprawną stylizację na liście.

Mój problem polega na tym, że lista nigdy się nie odświeża. Utrzymuje się niepoprawnie stylizowany. czy robię coś źle? Czy mój kod jest poprawny? FYI, próbowałem wszystkie rodzaje odmian .listview(), .listview('refresh') itp

KOD:

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

Dzięki!

Answer 1

Wpadłem na ten problem z kodem wyglądającym podobnie do twojego. Moim rozwiązaniem było umieszczenie odświeżenia w opcji ".ajax" kompletnej.

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

Answer 2

Twój kod wygląda dobrze dla mnie ... Wygląda prawie dokładnie tak, jak w mojej aplikacji.

Może problem leży w Twoim kodzie HTML? Powinno to wyglądać jak:

<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

Moje rozwiązanie było używać żadnych parametrów w metodzie listview jak w

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

końca ówczesnego ..

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

tutaj jest moja funkcja 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

Odpowiedź Spike'a zadziałała - byłam ta rgeting div div rodziców. Musiałem także wiązać z funkcji ajax do pagecreate - czyli:

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