jQuery Mobile .listview（'refresh'）无效

I'm building a mobile web app with jQuery Mobile and I have a problem. I am using jQuery to parse an XML file and create list items. It builds the list, then apppends that list of <li>s to the <ul> on the page. I read that in order to get the list to be styled correctly you have to call .listview('refresh') after you append the data to refresh the list so that jQuery Mobile can set correct styling to the list.

我正在使用jQuery Mobile构建移动Web应用程序，我遇到了问题。我使用jQuery来解析XML文件并创建列表项。它构建列表，然后将

的列表应用到页面上的

的列表应用到页面上的。我读到，为了使列表正确设置样式，您必须在附加数据以刷新列表后调用.listview（'refresh'），以便jQuery Mobile可以为列表设置正确的样式。

My problem is that the list never refreshes. It keeps getting styled incorrectly. Am I doing something wrong? Is my code correct? FYI, I have tried all kinds of variations of .listview(), .listview('refresh'), etc.

我的问题是列表永远不会刷新。它不断变换风格。难道我做错了什么？我的代码是否正确？仅供参考，我已尝试过.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>

Thanks!

谢谢！

5 个解决方案

#1

I ran into this problem with code looking similar to yours. My solution was to place the refresh into the $.ajax "complete" option.

我遇到了类似于你的代码遇到了这个问题。我的解决方案是将刷新放入$ .ajax“完成”选项。

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

#2

My solution was to use no parameters in the listview method as in

我的解决方案是在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>

end then..

结束然后..

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

here is my function ajaxGet:

这是我的函数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);}
    });
}

#3

$("#podcastList").trigger("create");

#4

Spike's answer worked for me -- I was targeting the ul's parent div. I also needed to bind the ajax function to pagecreate -- that is:

斯派克的回答对我有用 - 我的目标是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>

#5

Your code looks good to me... Looks almost exactly like what I have in my app.

你的代码对我来说很好看...看起来几乎就像我在我的应用程序中所拥有的一样。

Maybe the problem lies in your HTML? It should look something like:

也许问题在于你的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>

#1