Search jQuery

jQuery Forum

Screen name:
Shopno

Shopno's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()
[2Replies]
- 31-Jan-2016 10:54 AM
- Forum: jQuery Mobile
I have created a simple index.html file in which there is only one button. On clicking the button $( ":mobile-pagecontainer" ).pagecontainer("change", "page2.html"); is called to navigate to page2.
After moving to page2, a navbar is present within it but the navbar items are not clickable.

Below are the codes:

index.html
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="UTF-8">
6. <link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
7. <title>Blank App Designer Cordova Web App Project Template</title>
8. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
9. <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
10. <style>
11. @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
12. @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
13. </style>
14. <link rel="stylesheet" href="css/app.css">
15. <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
16. <script src="cordova.js" id="xdkJScordova_"></script>
17. <script src="js/app.js"></script>
18. <script src="js/init-app.js"></script>
19. <script src="xdk/init-dev.js"></script>
20. <script type="application/javascript" src="lib/jquery.min.js"></script>
21. <script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
22. </head>
24. <body onload="init()">
25. <div class="upage vertical-col left" id="mainpage" data-role="page" data-theme="b"><a class="widget uib_w_1 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="clickButton">Click</a>
26. </div>
27. </body>
29. </html>
page2.html
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <title>Mister Math - Ask me math!</title>
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
8. <link rel="stylesheet" href="css/app.css">
9. <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
10. <script src="cordova.js" id="xdkJScordova_"></script>
11. <script src="js/app.js"></script>
12. <script src="js/init-app.js"></script>
13. <script src="xdk/init-dev.js"></script>
14. <script type="application/javascript" src="lib/jquery.min.js"></script>
15. <script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
16. </head>
18. <body onload="init()">
19. <div data-role="page" id="pageone" data-theme="b">
20. <div data-role="header">
21. <h1>Header</h1>
22. <div data-role="navbar">
23. <ul>
24. <li><a href="#" class="ui-btn-active" data-icon="home">Home</a>
25. </li>
26. <li><a href="#pagetwo" data-icon="arrow-r">Page Two</a>
27. </li>
28. </ul>
29. </div>
30. </div>
32. <div data-role="main" class="ui-content">
33. <p>This is page 1</p>
34. </div>
36. <div data-role="footer">
37. <h1>Footer</h1>
38. </div>
39. </div>
41. <div data-role="page" id="pagetwo" data-theme="b">
42. <div data-role="header">
43. <h1>Header</h1>
44. <div data-role="navbar">
45. <ul>
46. <li><a href="#pageone" data-icon="home">Home</a>
47. </li>
48. <li><a href="#" data-icon="arrow-r">Page Two</a>
49. </li>
50. </ul>
51. </div>
52. </div>
54. <div data-role="main" class="ui-content">
55. <p>This is page 2</p>
56. </div>
58. <div data-role="footer">
59. <h1>Footer</h1>
60. </div>
61. </div>
62. </body>
63. </html>
app.js
1. function init() {
2. document.addEventListener("deviceready", deviceReady, true);
3. }
5. function deviceReady(){
6. $(document).on('click','#clickButton', function(e) {
7. $( ":mobile-pagecontainer" ).pagecontainer("change", "page2.html");
8. });
9. }
The navbar links are clickable if I directly view page2.html in any web browser but it is not clickable when it is loaded inside the app using
$( ":mobile-pagecontainer" ).pagecontainer("change", "page2.html");
Can anyone help me out fixing this?

Thanks in advance

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend