I’m trying the cross platform framework phonegap and have some problems with multipages.
All I want is the following:
- Page 1: static content
- Page 2: listview
The code I use:
Page 1: index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<title>Page 1</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="static" data-role="page">
<div data-role="header" data-position="fixed">
<h1 id="header-text">Page 1</h1>
</div><!-- /header -->
<div data-role="content">
<div id="static-content"></div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul class="navbar">
<li><a href="index.html" class="ui-btn-active" data-transition="none">Static</a></li>
<li><a href="list.html" data-transition="none">Listview</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
$('static-content').html('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.');
}
</script>
</body>
and for Page 2: list.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<title>Page 2</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="listview" data-role="page">
<div data-role="header" data-position="fixed">
<h1 id="header-text">Page 2</h1>
</div><!-- /header -->
<div data-role="content">
<div id="list-container">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul class="navbar">
<li><a href="index.html" data-transition="none">Static</a></li>
<li><a href="list.html" class="ui-btn-active" data-transition="none">Listview</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
console.log('deviceready');
}
</script>
</body>
I want to separate the content in different files just for a better structuring. The way jquery mobile handles pages like using one index works, but is not preferred… 😉
I tried the following solutions for the navbar links:
- a href with: rel=”external”
- a href with: data-ajax=”false”
- a href with: rel=”external” and data-ajax=”false”
Every time I do this with external links I get the following error:
Exception building cordova JS globals: TypeError: Cannot redefine property: connection for key "connection"
It seems like the cordova/phonegap frameworks gets loaded twice, but I thought using this links triggers a complete reload of the page, so what should be loaded twice???
Or do I have a general misunderstanding of the usage of multipages? Should be possible to separate content in different files, or?
Any help would really be great.
You need to put your scripts in the head section, which jquery mobile ignores on ajax loaded pages.
Anything in the body gets inserted into the DOM when the second page loads, which is why Cordova is trying to run twice.