Search jQuery

jQuery Forum

jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()

in jQuery Mobile • 7 years ago

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
</head>
<body onload="init()">
<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>
</div>
</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
<title>Mister Math - Ask me math!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
</head>
<body onload="init()">
<div data-role="page" id="pageone" data-theme="b">
<div data-role="header">
<h1>Header</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="home">Home</a>
</li>
<li><a href="#pagetwo" data-icon="arrow-r">Page Two</a>
</li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<p>This is page 1</p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="pagetwo" data-theme="b">
<div data-role="header">
<h1>Header</h1>
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">Home</a>
</li>
<li><a href="#" data-icon="arrow-r">Page Two</a>
</li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<p>This is page 2</p>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>

app.js

function init() {
document.addEventListener("deviceready", deviceReady, true);
}
function deviceReady(){
$(document).on('click','#clickButton', function(e) {
$( ":mobile-pagecontainer" ).pagecontainer("change", "page2.html");
});
}

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

Replies(2)

watusiware

Re: jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()

7 years ago

Your second document has two pages in it. That won't work, because when jQuery Mobile uses Ajax to load a document, it only load the FIRST page found in the document.

Either:

- put ALL of your pages in ONE document (which I do not recommend)

- put each page in a separate document

Also, you should not use $(document).ready(), .load(), etc. in JQM projects. Use JQM page or pagecontainer events.

Shopno

Re: Re: jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()

7 years ago

Thanks a lot for your answer. It works.

Top Reply

Response title

Attachments

jQuery Forum

jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()

Replies(2)

Re: jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()

Re: Re: jQuery mobile navbar items not clickable on page loaded through $( ":mobile-pagecontainer" ).pagecontainer()

Statistics

Tags

Actions