Menu
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.
================
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>
973
With default behavior the next page will be loaded as a DOM element so the javascript deviceready will not be called again.
Try with one of these ways to run it the normal way:
<li><a href="testing2.html" data-transition="none" rel="external">testing2</a></li>
Or
<li><a href="testing2.html" data-transition="none" data-ajax="false">testing2</a></li>
Explanation:
When a link is clicked, jQuery mobile will make sure the link is referencing a local URL, and if so, it'll prevent the link's default click behavior from occurring and request the referenced url via Ajax instead. When the page returns successfully, it will set the location.hash to the new page's relative url.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
For more detail info check the doc
84
As far as no bug in your code. This above code structure is not well constructed. You mentioned the phonegap and jquery mobile javascript in the head of first page and not in the second page. It does not have any jquery mobile javascript file in the head.
Facts from my knowledge :
This will do your job.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
