【发布时间】：2018-04-05 16:37:29
【问题描述】：
我有一个为 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。
All pages are visible in multi page template in 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 功能现在已弃用，因此将其更改为新版本是我做的第一件事。而且我尝试过使用已弃用的函数，但它根本不起作用 - 就像当前函数一样。
我还应该提到这是一个科尔多瓦应用程序，它是从命令行构建的。我从头开始重新制作了应用程序，然后将旧的 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>
</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>
【问题讨论】：
-
@deblocker 你是我的英雄。留下答案，我会将其标记为已接受，以便为您提供一些互联网积分。
标签： jquery html cordova jquery-mobile salesforce-ios-sdk