我试图通过从TMDb下拉电影数据并构建每个<li>
并将其附加到已存在的<ul>
元素来动态生成jQuery移动列表视图。麻烦的是,无论我做什么,我都无法正确地获取格式。我从TMDb获取数据和所有内容都很好,但是当我调用$("#ul").listview("refresh");
时,列表视图本身没有样式,这是我的一些代码(相关内容):
AJAX CALL THAT GRABS DATA AND BUILDS EACH <li>:
$.ajax({
type: "POST",
data: {
action: 'searchFilm',
film: film
},
dataType: "json",
url: "./php/functions.php",
success: function(json) {
console.log(json);
for(var i = 0; i < Object.size(json); i++){
var film = json[i.toString()];
$('#film-search-results').append("<li data-theme='j'><img src='" + film.poster_path + "' alt='Poster' /><a href=''><h3 class='ui-li-heading'>" + film.title + "</h3><p class='ui-li-desc'><strong>" + film.tagline + "</strong></p><p class='ui-li-desc'>" + film.overview + "</p></a></li>");
}
},
error: function(jqxhr, status, text){
console.log(jqxhr);
}
});
EXISTING CONTENT DIV THAT HOLDS THE <ul> ELEMENT:
<div id="content-add-title" data-role="content">
<ul id='film-search-results' data-role='listview'></ul>
</div><!-- end content-add-title -->
AND THE FUNCTION THAT CALLS THE AJAX METHOD:
$('#add-add-title-btn').click(function() {
if ($('#add-title-type-select').val() === "movie") {
$('#right-panel3').panel("close");
$('#film-search-results').html("");
searchFilms($('#add-title-name-field').val());
$('#add-title-page').trigger("create");
$('#film-search-results').listview("refresh");
}
});
真的不确定为什么它没有正确的风格任何人都有任何想法?
答案 0 :(得分:1)
您需要在ajax调用成功时刷新listview,而不是在Click事件处理程序中刷新 -
success: function(json) {
console.log(json);
for(var i = 0; i < Object.size(json); i++){
var film = json[i.toString()];
$('#film-search-results').append("<li data-theme='j'><img src='" + film.poster_path + "' alt='Poster' /><a href=''><h3 class='ui-li-heading'>" + film.title + "</h3><p class='ui-li-desc'><strong>" + film.tagline + "</strong></p><p class='ui-li-desc'>" + film.overview + "</p></a></li>");
}
$('#add-title-page').trigger("pagecreate"); // <- trigger pagecreate here, shouldnt need listview refresh
},
我猜你的ajax调用是在searchFilms
函数内部。在致电$('#film-search-results').listview("refresh");
后立即致电$('#add-title-page').trigger("create");
和searchFilms
时,您的ajax呼叫尚未完成,并且未使用JSON响应填充列表视图。这就是它无法正常工作的原因。