I followed all the steps in the basic Phonegap tutorial (Eclipse, Android SDK, ADT Phonegap), I created an HMTL page in the assets/www folder, ran it, and it showed my hello world html.
Step 2: I added a reference to jQuery Mobile on a CDN in my HTML page: it worked.
Step 3: I created a new html page, copy-pasted the code below, which is a sample from the Phonegap site, and it does… nothing. Not even an alert (I added some alerts to see if something happens, but even the onDeviceReady event doesn’t fire.
I have the Phonegap JAR in place, the cordova-1.7.0.js in my assest/www directory, but something is probably missing.
Can someone help me out?
I also tried another sample from the Phonegap site (the ‘device properties’ sample), but it still doesn’t work.
It’s a fresh Eclipse install, I’ve set the Android version to 2.3.3 and I’m using Phonegap 1.7.0.
================
EDIT
I tried some more, and I now can reproduce the error, but don’t know why it happens.
So I created a new project with the Phonegap example project, it works.
So, I copied all the assets from that project (1 html, 2 js and 1 css) to my projects, let the app start with that html (from my activity class), and it works.
And now for the fun part (not): I reset the startpage to my ‘old’ index.html (which is jQuery mobile), and then clicked on a link to the example html, it does NOT work.
So example html as startup: it works, example html opened via the link: does NOT work.
And when I loaded my other html pages which didn’t work as start page, instead of opening them via the start page, they work too.
So, is it possible that my jQuery Mobile-powered index page causes trouble ? (I’ll copy-paste the code below).
EDIT2: When I use a non-jQuery Mobile index page and I link with a normal <A href> link to the example html, it also works. So that’s hinting more and more to the fact that I think jQuery mobile is in my way…
The link code is this:
<li><a href="index4.html" data-transition="none">phonegap example</a></li>
The jQuery Mobile home page:
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="http://www.verfrisser.net/kalender/mobile/verfrisser.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>De NerdNight kalender</h1>
<a href="about.html" data-rel="dialog">About</a><a href="genereren.html" data-transition="pop">Genereren</a>
</div><!-- /header -->
<div data-role="content">
<img id="verfrisserlogo" src="verfrisserlogo.png" />
<ul data-role="listview" data-inset="true" data-filter="false">
<li><a href="2011.html" data-transition="none">2011</a></li>
<li><a href="2012.html" data-transition="none">2012</a></li>
<li><a href="2013.html" data-transition="none">2013</a></li>
<li><a href="testing.html" data-transition="none">testing</a></li>
<li><a href="testing2.html" data-transition="none">testing2</a></li>
<li><a href="testing3.html" data-transition="none">testing3</a></li>
<li><a href="index4.html" data-transition="none">phonegap example</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h6>(C) Verfrisser 1998 till now</h6>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
================
The sample HTML (which only shows the text ‘A dialog box will report the network state’ in the page)
<!DOCTYPE html>
<html>
<head>
<title>navigator.network.connection.type Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load //
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
alert ('stand alone');
//
function onDeviceReady() {
alert ('onDeviceReady');
checkConnection();
}
function checkConnection() {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';
alert('Connection type: ' + states[networkState]);
}
</script>
</head>
<body>
<p>A dialog box will report the network state.</p>
</body>
</html>
With default behavior the next page will be loaded as a DOM element so the javascript
devicereadywill not be called again.Try with one of these ways to run it the normal way:
Or
Explanation:
For more detail info check the doc