JQM适用于桌面浏览器,而不是移动设备
JQM works on desktop browser not mobile
下面的代码可以在各种桌面浏览器上正常工作,但是它的目标主要是智能手机。当从iPhone访问时-内容在<ul>
下为空白?
json从PHP页面中取出,并按预期工作。
编辑:改变getJSON
为静态json var info
测试-仍然没有在手机上渲染?-也尝试了各种版本的JQuery和JQuery- mobile,仍然没有变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="http://jqmdesigner.appspot.com/gk/lib/jquery.mobile/1.4.2/flatui/jquery.mobile.flatui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<title>parse JSON</title>
<script>
var info = [
{
"UID":5665,
"StudentID":"BA1400",
"LastName":"BARNES",
"FirstName":"JOHN",
"Affiliation":"DFRS"},
{"UID":10430,
"StudentID":"BA3700",
"LastName":"Barnyard",
"FirstName":"Ashley",
"Affiliation":"OTHER"},
{"UID":5781,
"StudentID":"BJ9188",
"LastName":"BARCLAY",
"FirstName":"GEOFFREY",
"Affiliation":"DFRS"},
{"UID":14815,
"StudentID":"BT0021",
"LastName":"Barhydt",
"FirstName":"Jimmy",
"Affiliation":"TAKOMA PARK"
}
];
$(document).on("pageinit", "#info-page", function () {
var server_url = "http://myDomain/tt_json.php";
$.getJSON(server_url, function(notUsing){
var li = "";
$.each(info, function (i, name) {
li += '<li><a href="#" id="' + i + '" class="info-go">' + name.LastName + ', ' + name.FirstName + '</a></li>';
});
$("#prof-list").append(li).promise().done(function () {
$(this).on("click", ".info-go", function (e) {
e.preventDefault();
$("#details-page").data("info", info[this.id]);
$.mobile.changePage("#details-page");
});
$(this).listview("refresh");
});
});
});
$(document).on("pagebeforeshow", "#details-page", function () {
var info = $(this).data("info");
var info_view = "";t
for (var key in info) {
info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
}
$(this).find("[data-role=content]").html(info_view);
});
</script>
</head>
<body>
<!--first page -->
<div data-role="page" id="info-page">
<div data-role="header" data-theme="b">
<h1>GET JSON data</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" data-theme="b" role="heading">Names</li>
</ul>
</div>
</div>
<!--second page -->
<div data-role="page" id="details-page">
<div data-role="header" data-theme="b"><a href="#" data-rel="back" data-role="button">Go back</a>
<h1>User Details</h1>
</div>
<div data-role="content"></div>
</div>
</body>
</html>
不知道为什么这解决了这个问题,因为我正在做一个标准的json请求从同一域,但它确实解决了这个问题:
添加标题:header("Access-Control-Allow-Origin: *");
相关文章:
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- PHP中的setcookie仅适用于localhost
- html5 drawImage适用于firefox,而不是chrome
- 提供“;onClick"适用于iPad(触摸屏)和桌面用户的默认功能
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- ResolveUrl是否适用于././也
- Firebase updateChildValues适用于IOS,但不适用于Web和Android
- JavaScript警报适用于int,但不适用于string
- SQLite插件适用于Mac和Windows,但不适用于手机上的Safari
- Regex Replace仅适用于Last Match
- window.onload适用于aspx页面,但不适用于普通html
- Jquery Ajax POST不工作.适用于GET
- 画布上的自定义字体仅适用于safari
- Javascript仅适用于alert()和Debug模式
- JS适用于Firefox和Safari,但不适用于Chrome.此处'是我的网站
- Regex不适用于Firefox,但适用于Chrome
- 通过单击主菜单外部关闭子菜单'不适用于IE,但适用于Firefox&铬
- AngularJS$http.post没有'不适用于Chrome,仅适用于IE
- 移动隐藏菜单适用于jsfiddle,但不适用于在线.任何解决方案都会有所帮助
- 如何使用适用于 Node.js 的 AWS 开发工具包将 Amazon S3 中的所有对象从一个前缀复制/移动到另一个前