1

我有一个为 iOS 构建的相当简单的移动应用程序，我正在尝试更新它。它是几年前在旧版本的 jQuery 和 jQuery Mobile 上创建的。jQuery 2.1.0 版和 jQuery Mobile 1.4.2 版。

我现在拥有这两个版本的最新版本（或者至少在我几周前开始这个项目时它们是最新版本）：jQuery 3.2.1 和 jQuery Mobile 1.4.5。我目前几天无法解决的问题是所有页面都同时显示，而 jQuery Mobile 一次应该只显示一个。我看过这篇较旧的帖子，但解决方案是使用更新版本的 jQuery。我不认为这对我来说是个问题，因为我使用了最新版本的 jQuery 和 jQuery Mobile。

所有页面都在 jquery mobile 的多页面模板中可见

我已经在下面发布了我的代码，删除了多余的行，例如 css 包含和一些 javascript 包含。我还删除了每个页面的内容以及页脚中的图像和徽标等。 force.js 用于与名为 Salesforce 的数据库服务进行通信，并且工作正常。它为我提供了 force.login() 函数，该函数使用户登录，然后在成功时运行一个函数。我已经在我的代码中插入了几个警报，这样我就可以看到哪里出了问题。我看到每个警报，直到 pagecontainer("change") 行。在该行之后我没有收到“页面更改”警报，所以我假设页面更改代码是我出错的地方。我'

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

我还尝试为主页创建第二个 HTML 文件并尝试切换到该文件。当我尝试这样做时，我根本没有收到任何警报，并且仍然在一页上看到所有内容。我宁愿不使用多个文件，因为整个应用程序已经在一个文件中构建了所有页面，所以我没有很远地追求这个想法。

我认为值得一提的是，旧应用程序使用了不同的功能来更改页面。

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

这工作得很好，旧版本的应用程序功能齐全，但这个 changePage 功能现在已被弃用，所以将其更改为新版本是我做的第一件事。而且我尝试过使用不推荐使用的函数，但它根本不起作用 - 就像当前函数一样。

我还应该提到这是一个科尔多瓦应用程序，它是从命令行构建的。我从头开始重新制作了应用程序，然后将旧的 index.html 文件移到其中，并一直在尝试更新它。

我希望有人能指出我做错的事情，或者至少为我指出正确的方向，让应用程序再次运行。我怎样才能让这些页面一次显示一个？

<!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>
4

1 回答 1

0

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. It works for me.

于 2018-10-13T22:28:11.703 回答