在 jQuery Mobile 应用程序中同时显示所有页面

Question

I have a fairly simple mobile app built for the iOS that I'm attempting to bring up to date.我有一个为 iOS 构建的相当简单的移动应用程序，我正在尝试更新它。 It was created several years ago on an older version of jQuery and jQuery Mobile.它是几年前在旧版本的 jQuery 和 jQuery Mobile 上创建的。 Version 2.1.0 of jQuery and 1.4.2 of jQuery Mobile to be exact.确切地说，jQuery 2.1.0 版和 jQuery Mobile 1.4.2 版。

I now have the latest versions of both of these (or at least they were the latest when I began this project a few weeks ago): jQuery 3.2.1 and jQuery Mobile 1.4.5.我现在拥有这两个的最新版本（或者至少是几周前我开始这个项目时的最新版本）：jQuery 3.2.1 和 jQuery Mobile 1.4.5。 My current problem that I have been unable to solve for a few days is that all of the pages are displayed at the same time, whereas jQuery Mobile should only be displaying one at a time.我几天来一直无法解决的当前问题是所有页面都同时显示，而 jQuery Mobile 应该一次只显示一个。 I've seen this older post but the solution was to use a newer version of jQuery.我看过这篇较旧的帖子，但解决方案是使用较新版本的 jQuery。 I don't believe that to be the problem for me since I took the latest versions of both jQuery and jQuery Mobile.我不认为这是我的问题，因为我使用了最新版本的 jQuery 和 jQuery Mobile。

All pages are visible in multi page template in jquery mobile 所有页面都在 jquery mobile 的多页面模板中可见

I've posted my code below, removing superfluous lines like css includes and a few of the javascript includes.我在下面发布了我的代码，删除了多余的行，如 css 包含和一些 javascript 包含。 I also removed the content of each page and images and logos in the footers, etc. The force.js is used to communicate with a database service called Salesforce and is working just fine.我还删除了每个页面的内容以及页脚中的图像和徽标等。 force.js 用于与名为 Salesforce 的数据库服务进行通信，并且工作正常。 It gives me the force.login() function which logs the user in and then runs a function on success.它给了我 force.login() 函数，它让用户登录，然后在成功时运行一个函数。 I've inserted several alerts into my code so I can see where anything may be going wrong.我在我的代码中插入了几个警报，这样我就可以看到哪里可能出错了。 I see every alert up until the pagecontainer("change") line.我看到每个警报，直到 pagecontainer("change") 行。 I don't get the "page changed" alert after that line, so I'm assuming the page change code is where I'm going wrong.在该行之后我没有收到“页面更改”警报，所以我假设页面更改代码是我出错的地方。 I've tried using a direct link to the #mainpage but that just scrolls me down to that section on a page where everything is still displayed all at once.我试过使用#mainpage 的直接链接，但这只会将我向下滚动到页面上的那个部分，在那里所有内容仍然一次显示。

<a href="#mainpage">to main page</a>

I had also tried creating a second HTML file for mainpage and tried switching to that.我还尝试为主页创建第二个 HTML 文件并尝试切换到该文件。 When I tried that I didn't get any alerts at all and still saw everything on one page.当我尝试这样做时，我根本没有收到任何警报，并且仍然在一页上看到所有内容。 I'd prefer not to use multiple files anyway since the entire app is built with all pages in one file already so I didn't pursue that idea very far.无论如何，我不希望使用多个文件，因为整个应用程序的所有页面已经构建在一个文件中，所以我并没有太追求这个想法。

I think it's worth mentioning that the old app used a different function to change pages.我认为值得一提的是，旧应用程序使用不同的功能来更改页面。

$.mobile.changePage( "#mainpage" , { reverse: false, changeHash: true } );

This worked perfectly and the old version of the app was fully functional but this changePage function is now deprecated so changing it to the newer one was one of the first things I did.这工作得很好，旧版本的应用程序功能齐全，但这个 changePage 功能现在已被弃用，因此将其更改为较新的功能是我做的第一件事。 And I have tried using the deprecated function, but it doesn't work at all - just like the current function.我已经尝试使用过时的函数，但它根本不起作用 - 就像当前函数一样。

I should also mention this is a cordova app, which was built from the command line.我还应该提到这是一个cordova应用程序，它是从命令行构建的。 I remade the app from scratch and then moved the old index.html file into it and have been attempting to bring it up to date.我从头开始重新制作该应用程序，然后将旧的 index.html 文件移入其中，并一直试图使其保持最新状态。

I'm hoping someone can point out something that I've done wrong or at least point me in the right direction to get the app functioning again.我希望有人能指出我做错了什么，或者至少指出我正确的方向，让应用程序再次运行。 How can I get these pages to show up one at a time?如何让这些页面一次显示一个？

<!DOCTYPE html>
<html>
<head>
    <meta name=“format-detection” content=“telephone=no” />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- include jquery mobile -->
    <script src="jQuery/jquery-3.2.1.js"></script>
    <script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>

    <!-- Include cordova & forceios. -->
    <script src="cordova.js"></script>
    <script src="force.js"></script>

    <script src="index.js"></script>

   <script>
   $(document).ready(function() {
       alert("onLoad: jquery ready");
       document.addEventListener("deviceready", onDeviceReady,false);
       alert("onLoad: deviceready");

   });

    function onDeviceReady() {
        force.login(function() {
            alert("auth succeeded");
            //enable buttons
            addClickListeners();
            alert("buttons setup.  Trying to change page now.");
            //try to change page
            $(":mobile-pagecontainer").pagecontainer("change", $("#mainpage"));
            alert("page changed");
        },
        function(error) {
            alert("Auth failed: " + error);
        }
        );
    }
    </script>
</head>

<body>

    <!-- Login Page -->
    <div data-role="page" data-control-title="Login" data-theme="a" id="loginpage">
        <div data-theme="a" data-role="header">
            <h3>
            Logging in...
            </h3>
        </div>
        <div data-role="content">
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
        </div>
    </div>
    <!-- end of Login Page -->

    <!-- main page -->
    <div data-role="page" data-control-title="Actions" data-theme="a" id="mainpage">
        <div data-theme="a" data-role="header">
            <h3>
                &nbsp;
            </h3>
        </div>
        <div data-role="content">
        </div>
        <div data-theme="c" data-role="footer" data-position="fixed">
        </div>
    </div>
    <!-- end of main page -->
</body>
</html>

Answer 1

The solution is simple, when using JQuery lib, don't use CDN, just add the .js an .css files locally and use them, this will solve the problem. 解决方案很简单，当使用JQuery库时，不使用CDN，只需在本地添加.js和.css文件并使用它们，即可解决此问题。 It works for me. 这个对我有用。

Answer 2

use: jQuery 1.11.3 + jQuery Mobile 1.4.5 使用：jQuery 1.11.3 + jQuery Mobile 1.4.5

Dont Use Newer version of Jquery 不要使用较新版本的Jquery

在 jQuery Mobile 应用程序中同时显示所有页面

问题描述

1 个解决方案

解决方案1
0 2018-10-13 22:28:11

解决方案2
0 2019-10-05 09:52:46

在 jQuery Mobile 应用程序中同时显示所有页面

问题描述

1 个解决方案

解决方案1 0 2018-10-13 22:28:11

解决方案2 0 2019-10-05 09:52:46

解决方案1
0 2018-10-13 22:28:11

解决方案2
0 2019-10-05 09:52:46