jQuery Mobile .listview('refresh') 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4821293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile .listview('refresh') not working
提问by RyanPitts
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 文件并创建列表项。它构建列表，然后将该<li>s列表附加到<ul>页面上的 。我读到为了使列表的样式正确，您必须.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!
谢谢！
回答by jody tate
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');
}
回答by Guillaume Bois
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);}
});
}
回答by sany
$("#podcastList").trigger("create");
回答by Miles Libbey
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:
Spike 的回答对我有用——我的目标是 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>
回答by Spike
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>
