jquery mobile 需要刷新才能正常工作 [英] jquery mobile needs a refresh to work properly

查看：39
本文介绍了jquery mobile 需要刷新才能正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 .net 和 JQM 中的母版页编写了两个页面.但是当我重定向到第二页时，JQM 滑动控件在没有刷新的情况下不起作用.此外，像简单的 alert() 之类的任何控件或功能都不起作用.我正在分享我的代码:

母版页:

<%@ 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="服务器"><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) {如果($.mobile.activePage.jqmData(面板")！==打开"){if (e.type === "swiperight") {$("#left-panel").panel("open");}}});});<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder><身体><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>网页</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">打开左侧面板</a>

<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">欢迎<asp:LoginName ID="LoginName1" runat="server"/><li data-icon="home"><a href="../Pages/Home.aspx" data-rel="">主页</a></li>

<div data-role="内容"><form id="form1" runat="server"><div><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

</表单>

Slide.aspx(它是一个空页面):

<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/UserMaster.Master" AutoEventWireup="true" CodeBehind="Slide.aspx.cs" Inherits="密码.Pages.Slide" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><script type="text/javascript"></asp:内容><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"></asp:内容>

Home.aspx(这也是一个空页面):

<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/UserMaster.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="密码.Pages.Home" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><script type="text/javascript"></asp:内容><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"></asp:内容>

我想使用母版页在每个页面中使用滑动控件，但是当我使用左滑动面板从 Slide.aspx 转到 Home.aspx 时，滑动控件不起作用.当我刷新页面时，它就可以工作了.按钮控件(例如)也是如此.我怎样才能让它工作?是关于pageinit"的问题吗?document.ready() 呢?我尝试了所有可能的解决方案，但都失败了.谢谢.

解决方案

jQuery Mobile 如何处理页面变化

要了解这种情况，您需要了解 jQuery Mobile 的工作原理.它使用ajax加载其他页面.

首页正常加载.它的HEAD和BODY被加载到DOM>，他们在那里等待其他内容.加载第二个页面时，仅将其BODY 内容加载到 DOM.

这就是您的按钮显示成功但单击事件不起作用的原因.相同的点击事件，其父 HEAD 在页面转换期间被忽略.

这是官方文档:http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

不幸的是，您不会在他们的文档中找到这一点.以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述这个.(jQuery Mobile 文档很大但缺少很多东西).

解决方案 1

在您的第二页以及其他所有页面中，将您的 SCRIPT 标签移到 BODY 内容中，像这样:

<div data-role=页面">//其余的 HTML 内容<脚本>//你的 javascript 会在这里

这是一个快速的解决方案，但仍然很丑陋.

可以在我的其他答案中找到工作示例:[更改页面后未触发页面显示][2]

另一个工作示例:[页面加载方式不同，jQuery-mobile 转换][3]

解决方案 2

将您所有的 javascript 移动到最初的第一个 HTML 中.收集所有内容并将其放入单个 js 文件中，放入 HEAD.在加载 jQuery Mobile 后对其进行初始化.

<元名称=视口"内容=宽度=设备宽度；初始规模=1.0；最大尺度=1.0；最小尺度=1.0；用户可扩展=否；目标密度Dpi=设备-dpi"/><link rel="样式表";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>//把你的代码放到一个新文件中

最后我将描述为什么这是一个好的解决方案的一部分.

解决方案 3

在按钮和用于更改页面的每个元素中使用 rel="external".因此，ajax 不会用于页面加载，您的 jQuery Mobile 应用程序将像普通的 Web 应用程序一样运行.不幸的是，这对您来说不是一个好的解决方案.

官方文档，找一章:没有 Ajax 的链接

现实的解决方案

现实的解决方案将使用解决方案 2.但与解决方案 2 不同的是，我将使用相同的 index.js 文件并在每个可能的其他页面的 HEAD 内对其进行初始化.

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 Page:

<%@ 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 (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 (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>

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.

解决方案

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.

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.

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.

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

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).

Solution 1

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.

Working example can be found in my other answer here: [Pageshow not triggered after changepage][2]

Another working example: [Page loaded differently with jQuery-mobile transition][3]

Solution 2

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.

Solution 3

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>

Official documentation, look for a chapter: Linking without Ajax

Realistic solution

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆