Jquery Mobile 和 JSON
Posted
技术标签:
【中文标题】Jquery Mobile 和 JSON【英文标题】：Jquery Mobile and 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>
JS
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 + '" />' +
'<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。请参阅下面的更新代码
【参考方案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 + '" /><h4>' + employee.title + '</h4><p>' + employee.info1 + '</p></a></li>');
);
$('#thrillerList').trigger('create');
$('#thrillerList').listview('refresh');
);
【讨论】：
感谢你们的帮助！我试过了，但还是不行:(我必须手动刷新页面才能显示数据以上是关于Jquery Mobile 和 JSON的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery 或 jquery mobile mobile 根据日期列出数据
jQuery Mobile-jquery Mobile 怎么用ajax提交表单
jQuery Mobile仿360首页，jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页