jQuery Mobile需要刷新才能正常工作 [英] jquery mobile needs a refresh to work properly
问题描述
我在.net和JQM中使用母版页写了两页.但是，当我重定向到第二页时，如果没有刷新，JQM滑动控件将无法工作.此外，任何控件或功能(如简单的alert())均不起作用.我正在共享我的代码:
I wrote two pages using master page in .net and JQM. But when I redirect to second page, JQM swipe control does not works without a refresh. Besides, any control or function like a simple alert() does not work. I am sharing my code:
母版页:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UserMaster.master.cs" Inherits="Password.Masters.UserMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).on("pageinit", "#demo-page", function () {
$(document).on("swipeleft swiperight", "#demo-page", function (e) {
if ($.mobile.activePage.jqmData("panel") !== "open") {
if (e.type === "swiperight") {
$("#left-panel").panel("open");
}
}
});
});
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div data-role="page" id="demo-page" data-theme="d">
<div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner">
<h1>Web Page</h1>
<a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
</div>
<div data-role="panel" id="left-panel" data-theme="b">
<!---->
<ul data-role="listview" data-theme="d">
<li data-icon="arrow-r" data-theme="b">Welcome
<asp:LoginName ID="LoginName1" runat="server" />
</li>
<li data-icon="home"><a href="../Pages/Home.aspx" data-rel="">Homepage</a></li>
</ul>
</div>
<div data-role="content">
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
</div>
</body>
</html>
Slide.aspx(它是一个空白页):
Slide.aspx (it is an empty page):
<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/UserMaster.Master" AutoEventWireup="true" CodeBehind="Slide.aspx.cs" Inherits="Password.Pages.Slide" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
Home.aspx(这也是一个空白页):
Home.aspx (also this is an empty page):
<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/UserMaster.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Password.Pages.Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
我想在使用母版页的每个页面中使用滑动控件，但是当我通过使用左侧滑动面板从Slide.aspx转到Home.aspx时，滑动控件不起作用.当我刷新页面时，它就可以工作了.例如，按钮控件是相同的.我该如何运作?是关于"pageinit"的问题吗?那document.ready()呢?我尝试了所有可能的解决方案，但失败了.谢谢.
I want to use the swipe control in every page using master page but when I go to Home.aspx from Slide.aspx by using left swipe panel, swipe control does not works. When I refresh the page, then it works. It is the same for a button control (for example). How can I make it work? Is the problem about "pageinit"? What about document.ready()? I had tried all possible solutions but failed. Thanks.
推荐答案
jQuery Mobile如何处理页面更改
要了解这种情况，您需要了解jQuery Mobile的工作方式.它使用ajax加载其他页面.
How jQuery Mobile handles page changes
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
首页已正常加载.将其 HEAD 和 BODY 加载到 DOM 中，它们在那里等待其他内容.加载第二页时，仅 其 BODY 内容被加载到 DOM .
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
这就是为什么您的按钮显示成功但单击事件不起作用的原因.在页面转换期间忽略其父 HEAD 的同一点击事件.
That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.
这是官方文档: http://jquerymobile.com /demos/1.2.0/docs/pages/page-links.html
不幸的是，您不会在他们的文档中找到此内容.以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述它. (jQuery Mobile文档很大，但是缺少很多东西.)
Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
在第二页和其他页面中，将 SCRIPT 标记移至 BODY 内容中，如下所示:
In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
这是一个快速的解决方案，但仍然是一个丑陋的解决方案.
This is a quick solution but still an ugly one.
可以在我的其他答案中找到工作示例: [页面更改后未触发页面显示] [2]
Working example can be found in my other answer here: [Pageshow not triggered after changepage][2]
另一个工作示例:[页面的jQuery移动转换加载方式不同] [3]
Another working example: [Page loaded differently with jQuery-mobile transition][3]
将所有JavaScript都移至原始的第一个HTML中.收集所有内容并将其放入单个js文件中，放入 HEAD .加载jQuery Mobile后对其进行初始化.
Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
最后，我将描述为什么这是一个好的解决方案的一部分.
In the end I will describe why this is a part of a good solution.
在按钮以及要用来更改页面的每个元素中使用 rel ="external" .因此，不会将ajax用于页面加载，并且jQuery Mobile应用程序的行为将与普通的Web应用程序类似.不幸的是，这不是您的理想解决方案.
Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application. Unfortunately this is not a good solution in your case.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
官方文档，请查找以下章节: 链接没有Ajax
Official documentation, look for a chapter: Linking without Ajax
现实解决方案将使用解决方案2 .但是与解决方案2不同，我将使用相同的index.js文件，并在每个其他页面的 HEAD 内部对其进行初始化.
Realistic solution would use Solution 2. But unlike solution 2, I would use that same index.js file and initialize it inside a HEAD of every possible other page.
这篇关于jQuery Mobile需要刷新才能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
