jQuery Mobile .listview（'refresh'）無法正常工作

Question

我正在用jQuery Mobile構建一個移動Web應用程序，我遇到了問題。我正在使用jQuery解析XML文件並創建列表項。它建立了該列表，然後將該列表<li> s添加到頁面上的<ul>。我讀到爲了讓列表的樣式正確，您必須在追加數據以刷新列表之後調用.listview('refresh')，以便jQuery Mobile可以將正確的樣式設置爲列表。

我的問題是，列表不會刷新。它保持不正確的樣式。難道我做錯了什麼？我的代碼是否正確？僅供參考，我已經試過各種.listview()，.listview('refresh')變化等

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> 

謝謝！

Answer 1

我碰到了這個問題，看起來類似於你的代碼。我的解決方案是將刷新放到$ .ajax「complete」選項中。

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

Answer 2

您的代碼對我來說看起來不錯...看起來幾乎和我的應用程序中的一樣。

也許問題出在你的HTML？它應該看起來像這樣：

<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

我的解決辦法是使用在ListView方法沒有參數，在

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

結束的話..

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

這裏是我的功能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

斯派克的答案爲我工作 - 我是ta控制ul的父母div。我還需要綁定的AJAX功能pagecreate - 那就是：

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