All pages displaying at once in jQuery Mobile app
Question
I have a fairly simple mobile app built for the iOS that I'm attempting to bring up to date. It was created several years ago on an older version of jQuery and jQuery Mobile. Version 2.1.0 of jQuery and 1.4.2 of jQuery Mobile to be exact.
I now have the latest versions of both of these (or at least they were the latest when I began this project a few weeks ago): jQuery 3.2.1 and jQuery Mobile 1.4.5. My current problem that I have been unable to solve for a few days is that all of the pages are displayed at the same time, whereas jQuery Mobile should only be displaying one at a time. I've seen this older post but the solution was to use a newer version of jQuery. I don't believe that to be the problem for me since I took the latest versions of both jQuery and jQuery Mobile.
All pages are visible in multi page template in jquery mobile
I've posted my code below, removing superfluous lines like css includes and a few of the javascript includes. I also removed the content of each page and images and logos in the footers, etc. The force.js is used to communicate with a database service called Salesforce and is working just fine. It gives me the force.login() function which logs the user in and then runs a function on success. I've inserted several alerts into my code so I can see where anything may be going wrong. I see every alert up until the pagecontainer("change") line. I don't get the "page changed" alert after that line, so I'm assuming the page change code is where I'm going wrong. I've tried using a direct link to the #mainpage but that just scrolls me down to that section on a page where everything is still displayed all at once.
<a href="#mainpage">to main page</a>
I had also tried creating a second HTML file for mainpage and tried switching to that. When I tried that I didn't get any alerts at all and still saw everything on one page. I'd prefer not to use multiple files anyway since the entire app is built with all pages in one file already so I didn't pursue that idea very far.
I think it's worth mentioning that the old app used a different function to change pages.
$.mobile.changePage( "#mainpage" , { reverse: false, changeHash: true } );
This worked perfectly and the old version of the app was fully functional but this changePage function is now deprecated so changing it to the newer one was one of the first things I did. And I have tried using the deprecated function, but it doesn't work at all - just like the current function.
I should also mention this is a cordova app, which was built from the command line. I remade the app from scratch and then moved the old index.html file into it and have been attempting to bring it up to date.
I'm hoping someone can point out something that I've done wrong or at least point me in the right direction to get the app functioning again. How can I get these pages to show up one at a time?
<!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>
1 answers
solution1
0 2018-10-13 22:28:11
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.
solution2
0 2019-10-05 09:52:46
use: jQuery 1.11.3 + jQuery Mobile 1.4.5
Dont Use Newer version of Jquery
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.