Phonegap with jquery mobile “hello world” not working
Question
just trying to get jquery mobile firing with phonegap, but I can't get my hello world firing.
All of the references to the Js is correct.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery_mobile.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$(document).ready(function() {
$(document).bind("deviceready", function(){
navigator.notification.alert("hello world");
});
});
}
</script>
</head>
<body>
</body>
</html>
4 answers
solution1
1 ACCPTED 2011-11-03 03:43:32
Try this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Hello With JQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0rc1.min.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript">
var onDeviceReady = function() {
alert("OnDeviceReady fired.");
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();">
</body>
</html>
solution2
0 2011-11-02 20:19:53
Did you include the reference where the html and js ar located in Xcode?
You should try to start debugging by placing something in the body of the html and see if that appears when you compile and run.
solution3
0 2011-11-02 20:20:23
Try removing the addEventListener and Function like this:
<script type="text/javascript">
$(document).ready(function(){
$(document).bind('deviceready', function(){
navigator.notification.alert("hello world");
});
});
</script>
There is no need to listen for 'deviceready' twice. The document will be ready first, followed by JQM firing deviceready.
I hope it helps!
solution4
0 2012-02-04 19:46:53
I had a similar issue. Commenting out jquery or jquerymobile reference caused the app to work but i could not get it to work with both in the header. Both files were in the www folder of phonegap. I even tried referencing the code from the jquery.com but it didn't work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.