Все страницы отображаются сразу в мобильном приложении jQuery

У меня есть довольно простое мобильное приложение, созданное для iOS, которое я пытаюсь обновить. Он был создан несколько лет назад на более старой версии jQuery и jQuery Mobile. Версии 2.1.0 jQuery и 1.4.2 jQuery Mobile, если быть точным.

Теперь у меня есть последние версии обоих (или, по крайней мере, они были последними, когда я начал этот проект несколько недель назад): 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>
Источник

1 ответ

Решение простое, при использовании JQuery lib, не используйте CDN, просто добавьте файлы.js и.css локально и используйте их, это решит проблему. Меня устраивает.

Источник
Другие вопросы по тегам