javascript JQuery Mobile 在导航页面后丢失所有样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10092111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile Loses All Styles After Navigating Pages
提问by sprocket12
Im going through a serious headache, for the last few hours I cant figure out why when I flick between pages (dynamically loaded by ajax) that the styling all goes.
我正在经历一个严重的头痛，在过去的几个小时里，我无法弄清楚为什么当我在页面之间轻弹（由 ajax 动态加载）时，样式全部消失了。
I have read dozens of posts on the net about this, and have tried .page() trigger("Refresh") trigger create and many more.
我已经在网上阅读了数十篇关于此的帖子，并尝试了 .page() trigger("Refresh") trigger create 等等。
Page 1 has a list, on click of the item it fetches the complete contents of another list and put them into the DOM.
第 1 页有一个列表，单击该项目时，它会获取另一个列表的完整内容并将它们放入 DOM。
JQuery Versions (mobile 1.1rc2 - but same issue with 1.0.1 stable):
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">
This link is clicked on initial list:
在初始列表中单击此链接：
javascript:GetGarageList("G9236")
which triggers :
触发：
// 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();
}
});
};
On first load, the 2nd page looks perfect :
第一次加载时，第二页看起来很完美：
But when I press back button up top. Then click another link :
但是当我按下返回按钮时。然后点击另一个链接：
javascript:GetGarageList("G9336")
I get messed up view :
我搞砸了视图：
Please help!
请帮忙！
EDIT :
编辑 ：
Others have used .trigger("create"); and say they solved the problem... but everytime I add that to my code like so :
其他人使用过 .trigger("create"); 并说他们解决了问题......但每次我将其添加到我的代码中时：
$("#garageList").html(msg.d).trigger("create");
or
或者
$("#garageList").html(msg.d);
$("#garageList").trigger("create");
It just gives me a loading spinner forever.
它只是给了我一个永远的加载微调器。
EDIT 2:
编辑2：
As per Barnes suggestion below I have changed the html as so :
根据下面的巴恩斯建议，我已经更改了 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 -->
Then I tried (in the ajax success):
然后我尝试了（在 ajax 成功中）：
$("#xyz").empty();
$("#xyz").html(msg.d);
$("#abc").listview("refresh");
$.mobile.changePage("#garageList");
AND
和
$("#xyz").html(msg.d);
$("#xyz").listview("refresh");
$.mobile.changePage("#garageList");
HERE is some sample output of msg.d :
这是 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>
"
And other variations, but it still doesnt want to play (spinner goes on forever on refresh) ... although its improved a little (when I take the refresh out) :
和其他变化，但它仍然不想播放（微调器在刷新时永远继续）......尽管它有所改善（当我取出刷新时）：
回答by Rutz
This has been solving all of my problems.
这已经解决了我所有的问题。
$('...').trigger('create');
You just have to find the right element to put in the selector.
你只需要找到正确的元素来放入选择器。
For me, these lines did the trick:
对我来说，这些行起到了作用：
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});
回答by Jorge Con Jota
Placing listview('refresh')after changing the page solved my problem.
listview('refresh')更改页面后放置解决了我的问题。
$.mobile.changePage("#catalog");
$('#list_included_in_catalog_page').listview('refresh');
回答by Jhonatan Avila Garcia
The calls of jquery mobile to other pages, are with ajax and sometimes this produces a failure when loading styles and libraries.
jquery mobile 到其他页面的调用，都是用ajax 的，有时这会在加载样式和库时导致失败。
When I use redirect an external page I use window.location.href.
当我使用重定向外部页面时，我使用window.location.href.
A possible solution, is to correctly order the links and javascript in the header of the file, for example:
一个可能的解决方案是正确排序文件头中的链接和 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>
回答by poonkave
instead of
代替
success: function (msg) {
$("#garageList").html(msg.d);
$.mobile.changePage("#garageList");
}
Do
做
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();
}
回答by sprocket12
After trying everything I settled for a less than ideal solution of using seperate .aspx pages.
在尝试了一切之后，我找到了一个不太理想的使用单独 .aspx 页面的解决方案。
But now this had the issue that I had to pass the parameters now in the URL between pages (security risk).
但是现在有一个问题，我现在必须在页面之间的 URL 中传递参数（安全风险）。
So instead of using :
所以而不是使用：
javascript:GetGarageList("G9236")
I now use a guid instead :
我现在使用 guid 代替：
http://localhost:54419/GarageList.aspx?id=319d8819-11ae-446f-b373-50d08e06159a
I generate the new page in the c# page load event :
我在 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>");
}
This works pretty well, but I noticed some remnants of previous pages got left on the screen even after a page transition, this was solved by removing all the default html in the page and leaving only this line :
这工作得很好，但我注意到即使在页面转换后屏幕上仍保留了一些以前页面的残留物，这是通过删除页面中的所有默认 html 并只留下这一行来解决的：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GarageList.aspx.cs" Inherits="CP.GarageList" %>
Now the issue I face is that the pages are super slow on my mobile device.
现在我面临的问题是我的移动设备上的页面速度非常慢。
回答by kishanio
You need to refresh your list. e.g.)
您需要刷新列表。例如）
$('Some DiV').listview('refresh');
