jQuery Mobile .listview ('refresh') không hoạt động

Question

Tôi đang tạo ứng dụng web di động với jQuery Mobile và tôi gặp sự cố. Tôi đang sử dụng jQuery để phân tích một tệp XML và tạo các mục danh sách. Nó xây dựng danh sách, sau đó apppends rằng danh sách của <li> s đến <ul> trên trang. Tôi đọc rằng để có được danh sách được tạo kiểu một cách chính xác, bạn phải gọi .listview('refresh') sau khi bạn nối thêm dữ liệu để làm mới danh sách để jQuery Mobile có thể thiết lập kiểu dáng chính xác cho danh sách.

Vấn đề của tôi là danh sách không bao giờ làm mới. Nó tiếp tục được tạo kiểu không chính xác. Tôi có làm điều gì sai? Mã của tôi có đúng không? FYI, tôi đã thử tất cả các loại biến thể của .listview(), .listview('refresh') vv

Mã sản phẩm:

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

Cảm ơn!

Answer 1

Tôi gặp sự cố này với mã trông giống như mã của bạn. Giải pháp của tôi là đặt làm mới vào tùy chọn $ .ajax "complete".

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

Answer 2

Mã của bạn có vẻ tốt với tôi ... Trông gần như chính xác như những gì tôi có trong ứng dụng của mình.

Có thể sự cố nằm trong HTML của bạn? Hình ảnh trông giống như sau:

<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

Giải pháp của tôi là sử dụng không có tham số trong phương pháp listview như trong

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

cuối rồi ..

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

đây là chức năng ajaxGet tôi:

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

Câu trả lời của Spike làm việc cho tôi - tôi đã rgeting cha mẹ của ul div. Tôi cũng cần thiết để ràng buộc chức năng ajax để pagecreate - đó là:

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