在 jQuery Mobile 應用程序中同時顯示所有頁面

Question

我有一個為 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") 行。 在該行之后我沒有收到“頁面更改”警報，所以我假設頁面更改代碼是我出錯的地方。 我試過使用#mainpage 的直接鏈接，但這只會將我向下滾動到頁面上的那個部分，在那里所有內容仍然一次顯示。

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

我還嘗試為主頁創建第二個 HTML 文件並嘗試切換到該文件。 當我嘗試這樣做時，我根本沒有收到任何警報，並且仍然在一頁上看到所有內容。 無論如何，我不希望使用多個文件，因為整個應用程序的所有頁面已經構建在一個文件中，所以我並沒有太追求這個想法。

我認為值得一提的是，舊應用程序使用不同的功能來更改頁面。

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

這工作得很好，舊版本的應用程序功能齊全，但這個 changePage 功能現在已被棄用，因此將其更改為較新的功能是我做的第一件事。 我已經嘗試使用過時的函數，但它根本不起作用 - 就像當前函數一樣。

我還應該提到這是一個cordova應用程序，它是從命令行構建的。 我從頭開始重新制作該應用程序，然后將舊的 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>

Answer 1

解決方案很簡單，當使用JQuery庫時，不使用CDN，只需在本地添加.js和.css文件並使用它們，即可解決此問題。 這個對我有用。

Answer 2

使用：jQuery 1.11.3 + jQuery Mobile 1.4.5

不要使用較新版本的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