Jquery Mobile 和 JSON答案

【问题标题】：Jquery Mobile and JSONJquery Mobile 和 JSON
【发布时间】：2014-01-02 22:29:24
【问题描述】：

我需要帮助来了解我的网络应用程序的怪异环境。

我正在尝试使用 Phonegap 和 jQuery mobile 创建一个应用程序。 listview 的刷新有问题。我从 JSON 下载数据并创建一个元素列表。

该列表未正确下载/设置样式，但如果我刷新浏览器，我会正确看到它。

有什么问题？

接下来您可以看到 HTML 和 Javascript 页面。

HTML

<!DOCTYPE HTML>
<html>
<head>
<title>CATEGORIA THRILLER</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div id="thrillerListPage" data-role="page" data-theme="a">

<div data-role="header" data-position="fixed" data-theme="a">
<a href="index.html" data-icon="home" data-iconpos="notext"></a>
<h1>THRILLER</h1>
    </div>
    <div data-role="content" data-theme="a">
        <ul id="thrillerList" data-role="listview" data-filter="true" data-theme="a"></ul>
    </div>       
</div>
<script src="js/libri-list.js"></script>
<script src="js/libri-details.js"></script>

</body>
</html>

var serviceURL = "/services/";
var employees;

$(document).ready (function() {
getThrillerList();
});

$(document).delegate('#thrillerListPage','pageshow', function(event) {   
     getThrillerList();
});
$('#thrillerListPage').bind('pageinit', function(event) {
    getThrillerList();
});

function getThrillerList() {
    $.getJSON(serviceURL + 'get-lista-libri-thriller.php', function(data) {
        $('#thrillerList li').remove();
        employees = data.items;

        $.each(employees, function(index, employee) {
            $('#thrillerList').append('<li><a href="libri-details.html?id=' + employee.id + '">' +
                    '<img src="employee.img + '" width="58px" height="80px" />' +
                    '<h4>' + employee.title + '</h4>' +
                    '<p>' + employee.info1 + '</p>' +
                    '</a></li>');
        });
        $('#thrillerList').listview('refresh');
    });
}

希望有人可以帮助我！

谢谢！

【问题讨论】：

你为什么要加载jquery.mobile-1.3.2.css和mobile-1.3.2.min.css？
#thrillerList.append() 中有一个错误的 javascript。请参阅下面的更新代码

标签： android jquery json jquery-mobile cordova

【解决方案1】：

function getThrillerList() {
  $.getJSON(serviceURL + 'get-lista-libri-thriller.php', function(data) {
    $('#thrillerList li').remove();
    employees = data.items;
    $.each(employees, function(index, employee) {
        $('#thrillerList').append('<li><a href="libri-details.html?id=' + employee.id + '"><img src="'+employee.img + '" width="58px" height="80px" /><h4>' + employee.title + '</h4><p>' + employee.info1 + '</p></a></li>');

    });
    $('#thrillerList').trigger('create');
    $('#thrillerList').listview('refresh');
  });
}

【讨论】：

感谢你们的帮助！我试过了，但还是不行:(我必须手动刷新页面才能显示数据