我经历了一个严重的头痛,在过去的几个小时里,我无法弄清楚为什么当我在页面之间轻弹(由ajax动态加载)时,样式都会发生。
我已经在网上阅读了几十篇关于此的帖子,并尝试过.page()触发器(“刷新”)触发器创建等等。
第1页有一个列表,点击该项目后,它会获取另一个列表的完整内容并将它们放入DOM中。
JQuery版本(移动1.1rc2 - 但与1.0.1稳定版相同):
<script src="scripts/ajax.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
点击初始列表中的链接:
javascript:GetGarageList("G9236")
触发:
// show garages for factor
function GetGarageList(accNo) {
$.mobile.showPageLoadingMsg("b", "Loading", false);
$.ajax({
type: "POST",
url: "Default.aspx/GetGarageList",
data: "{'accNo':'" + accNo + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#garageList").html(msg.d);
$.mobile.changePage("#garageList");
},
error: function () {
ShowError("Error :(");
},
complete: function () {
$.mobile.hidePageLoadingMsg();
}
});
};
首次加载时,第二页看起来很完美:
但是当我向上按回按钮时。然后点击另一个链接:
javascript:GetGarageList("G9336")
我搞砸视图:
请帮忙!
编辑:
其他人使用.trigger(“创造”);并说他们解决了这个问题...但每次我都将其添加到我的代码中,如下所示:
$("#garageList").html(msg.d).trigger("create");
或
$("#garageList").html(msg.d);
$("#garageList").trigger("create");
它只是给了我一个装载旋转器。
编辑2:
根据Barnes的建议,我已经改变了html:
<%--Garage List--%>
<div data-role="page" id="garageList" data-add-back-btn="true" data-theme="a">
<div data-role='header' data-position='fixed'>
<h1>Garages</h1>
<a href='index.html' data-icon='plus' data-iconpos='notext' class='ui-btn-right' data-theme='b'></a>
</div>
<div data-role='content' id="abc">
<ul data-role='listview' id='xyz' data-filter='true' data-filter-theme='a' data-filter-placeholder='search name or account no...' data-split-icon='info' data-split-theme='a'>
/// --> new content goes here... as simply many <li> items.
</ul>
</div> <!-- /content -->
</div> <!-- /page -->
然后我尝试(在ajax成功):
$("#xyz").empty();
$("#xyz").html(msg.d);
$("#abc").listview("refresh");
$.mobile.changePage("#garageList");
和
$("#xyz").html(msg.d);
$("#xyz").listview("refresh");
$.mobile.changePage("#garageList");
这是msg.d的一些示例输出:
"<li><a href='javascript:GetGarageDetails(16267)'><h3>A KETCHEN MOTOR ENGINEERS</h3><p><strong>MID LOTHIAN</strong></p></a><a href="javascript:GetFactorDetails('16267')"></a></li>
<li><a href='javascript:GetGarageDetails(16328)'><h3>G.A.AUTOS</h3><p><strong></strong></p></a><a href="javascript:GetFactorDetails('16328')"></a></li>
<li><a href='javascript:GetGarageDetails(16262)'><h3>GARRY HENDERSON MOTOR ENGINEERS</h3><p><strong>WEST LIMTON</strong></p></a><a href="javascript:GetFactorDetails('16262')"></a></li>
<li><a href='javascript:GetGarageDetails(16264)'><h3>LEADBURN GARAGE LTD</h3><p><strong>PEELBLESHIRE</strong></p></a><a href="javascript:GetFactorDetails('16264')"></a></li>
<li><a href='javascript:GetGarageDetails(16315)'><h3>LOTHIAN MOTORS</h3><p><strong></strong></p></a><a href="javascript:GetFactorDetails('16315')"></a></li>
"
和其他变化,但它仍然不想玩(旋转器继续刷新)...虽然它有所改善(当我刷新时):
答案 0 :(得分:15)
这已经解决了我所有的问题。
$('...').trigger('create');
你只需找到要放入选择器的正确元素。
对我来说,这些界限就是诀窍:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});
答案 1 :(得分:4)
更改页面后放置listview('refresh')
解决了我的问题。
$.mobile.changePage("#catalog");
$('#list_included_in_catalog_page').listview('refresh');
答案 2 :(得分:0)
而不是
success: function (msg) {
$("#garageList").html(msg.d);
$.mobile.changePage("#garageList");
}
待办事项
success: function (msg) {
$("#abc").html("<ul data-role='listview' id='xyz' data-filter='true' data-filter-theme='a' data-filter-placeholder='search name or account no...' data-split-icon='info' data-split-theme='a'> " + msg.d + "<ul>");
$.mobile.changePage("#garageList");
$("#abc").find(":jqmData(role=listview)").listview();
}
答案 3 :(得分:0)
在尝试了所有内容之后,我找到了使用单独.aspx页面的不太理想的解决方案。
但是现在我遇到的问题是我必须在页面之间的URL中传递参数(安全风险)。
所以不要使用:
javascript:GetGarageList("G9236")
我现在使用guid代替:
http://localhost:54419/GarageList.aspx?id=319d8819-11ae-446f-b373-50d08e06159a
我在c#页面加载事件中生成新页面:
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("<div data-role='page' id='garageList' data-add-back-btn='true' data-theme='a'>");
Response.Write("<div data-role='header' data-position='fixed'>");
Response.Write("<h1>Garages</h1>");
Response.Write("<a href='index.html' data-icon='plus' data-iconpos='notext' class='ui-btn-right' data-theme='b'></a>");
Response.Write("</div>");
Response.Write("<div data-role='content'>");
Response.Write("<ul data-role='listview' data-filter='true' data-filter-theme='a' data-filter-placeholder='search name or account no...' data-split-icon='info' data-split-theme='a'>");
if (!string.IsNullOrEmpty(Request.QueryString["id"]))
{
Guid guid = Guid.Parse(Request.QueryString["id"]);
using (DbContext db = new DbContext())
{
var f = db.Factors.Where(x => x.Guid == guid).SingleOrDefault();
if (f != null)
{
foreach (var g in f.Garages.OrderBy(x => x.Name))
{
Response.Write(String.Format("<li><a href='javascript:GetGarageDetails({0})'><h3>{1}</h3><p><strong>{2}</strong></p></a><a href='#' /></li>", g.Guid, g.Name, g.Town));
}
}
}
}
Response.Write("</ul>");
Response.Write("</div>");
Response.Write("</div>");
}
这很好用,但是我注意到在页面转换后,屏幕上还剩下一些以前页面的残余,这是通过删除页面中的所有默认html并只留下这一行来解决的:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GarageList.aspx.cs" Inherits="CP.GarageList" %>
现在我面临的问题是我的移动设备上的页面速度非常慢。
答案 4 :(得分:0)
您需要刷新列表。 例如)
$('Some DiV').listview('refresh');
答案 5 :(得分:0)
jquery mobile对其他页面的调用是使用ajax,有时这会在加载样式和库时产生失败。
当我使用重定向外部页面时,我使用window.location.href
。
一种可能的解决方案是正确排序文件标题中的链接和javascript,例如:
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" href="jquery_mobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="jquery_mobile/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="jquery_mobile/jquery-1.12.4.js"></script>
<script type="text/javascript" src="jquery_mobile/jquery.mobile-1.4.5.min.js"></script>
<title>my page</title></head>