最新の状態にしようとしている iOS 用に構築されたかなり単純なモバイル アプリがあります。数年前に古いバージョンの jQuery および jQuery Mobile で作成されました。正確には、jQuery のバージョン 2.1.0 と jQuery Mobile の 1.4.2 です。
私は現在、これらの両方の最新バージョンを持っています (少なくとも、数週間前にこのプロジェクトを開始したときは最新でした): jQuery 3.2.1 と jQuery Mobile 1.4.5。数日間解決できなかった現在の問題は、すべてのページが同時に表示されるのに対し、jQuery Mobile は一度に 1 つしか表示されないことです。この古い投稿を見たことがありますが、解決策は新しいバージョンの jQuery を使用することでした。jQuery と jQuery Mobile の両方の最新バージョンを使用しているので、それが問題になるとは思いません。
すべてのページが jquery モバイルの複数ページ テンプレートに表示されます
以下にコードを掲載し、css インクルードやいくつかの JavaScript インクルードなどの余分な行を削除しました。また、各ページのコンテンツやフッターなどの画像やロゴを削除しました。force.js は、Salesforce というデータベース サービスとの通信に使用されており、問題なく動作しています。ユーザーをログインさせ、成功時に関数を実行する force.login() 関数を提供します。コードにいくつかのアラートを挿入して、どこで問題が発生しているかを確認できるようにしました。pagecontainer("change") 行までのすべてのアラートが表示されます。その行の後に「ページが変更されました」というアラートが表示されないため、ページ変更コードが間違っていると思います。私'
<a href="#mainpage">to main page</a>
また、メインページ用の 2 つ目の HTML ファイルを作成して、それに切り替えようとしました。試してみたところ、アラートはまったく表示されず、すべてが 1 ページに表示されました。アプリ全体がすべてのページを 1 つのファイルにまとめて構築されているので、とにかく複数のファイルを使用したくないので、そのアイデアをあまり追求しませんでした。
旧アプリでは別の機能でページを切り替えていたのは特筆に値すると思います。
$.mobile.changePage( "#mainpage" , { reverse: false, changeHash: true } );
これは完全に機能し、アプリの古いバージョンは完全に機能していましたが、この changePage 関数は現在廃止されているため、新しいものに変更することは、私が最初に行ったことの 1 つです。そして、非推奨の関数を使用しようとしましたが、現在の関数と同じようにまったく機能しません。
また、これはコマンド ラインからビルドされた cordova アプリであることに言及する必要があります。アプリをゼロから作り直してから、古い index.html ファイルをアプリに移動し、最新の状態にしようとしています。
誰かが私が間違ったことを指摘したり、少なくともアプリを再び機能させるために正しい方向に向けてくれることを願っています. これらのページを 1 つずつ表示するにはどうすればよいですか?
<!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>
</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>