Jquery - $.mobile.changePage is not working
Question
I am trying to change pages on in my project. I have two divs containing information and they each have a data-role of "page". In addition, they both have ids. On my js file I have a simple onclick event that calls a function that then uses the
$.mobile.changePage("#2");
To go from my first div to my second div. The only problem is whenever I try to change the page I am getting an error:
Uncaught TypeError: Cannot read property 'changePage' of undefined
I have already searched on other peoples posts on stack overflow and haven't found anything that can help me. Here is some of my code:
global.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<script src="js/lib/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile-
1.4.5.css">
<script src="js/global.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.js"></script>
<script src="js/p5.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js">
</script>
</head>
<body>
<div data-role="page" id="1" style="background-color: #56f0b1;">
<button id ="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
</body>
</html>
global.js
$(document).ready(function () {
$("#startGame").on("click",getToNextPage);
});
function getToNextPage(){
$.mobile.changePage("#2");
}
1 answers
solution1
1 ACCPTED 2018-10-24 22:14:02
As mentioned in comments, the core jQuery library must be loaded before jQuery Mobile.
In your code, it seems you're loading two jQuery versions and one of them is loaded after jQuery Mobile.
Also, according to comments in this question , the page IDs should not be only numeric.
Here's an example:
$(document).ready(function() { $("#startGame").on("click", getToNextPage); }); function getToNextPage() { $.mobile.changePage("#page2"); }
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div data-role="page" id="page1" style="background-color: #56f0b1;"> <button id="startGame" type="button">Start Game</button> </div> <div data-role="page" id="page2" style="background-color: #56f0b1;"> <h2>Page 2 </h2> </div>
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.