Menu
I am unable to get the device ready function to work within phonegap i.e. xcode simulator. The html is as follow: `
<title>Boilerplate</title>
</head>
<body>
<div id="main" data-role="page">
<div data-role="header" class="logo">
<img class="logo" src="img/premium-logo.jpg" />
</div>
<div data-role="content">
<h1>Apache Cordova Test Zone</h1>
<div class="test-zone" id="test-zone">
</div>
</div>
<div data-role="footer">
<h4>Footer of main page</h4>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jQuery-Mobile-1.3.1-min.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(document).ready(init());
</script>
</body>
the Javascript file index.js:
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert('It works!');
}
If i comment out the line inside the init function and replace it simply with onDeviceReady(); I can get the alert to work on chrome.
Why won't it work in the simulator with the code above. Thank you
598
onDeviceReady event only works when testing your phonegap application from the device emulator, not in chrome.
Here is the best way I have found to do the two frameworks (phonegap and jQuery Mobile) to work together.
In my index.html
<script type="text/javascript" src="js/libs/LABjs/LAB.min.js"></script>
<script type="text/javascript" src="js/libs/jQuery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/libs/jQuery/jquery.mobile-1.3.1.js"></script>
Please notice I use the LABjs Library to load JS scripts (cordova.js is being to be loaded only if we detect that we are in a device), you can find it in google for LABjs library.
In my "js/index.js"
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
var resourcesReady = false;
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
//load scripts
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
$LAB.script("cordova.js").wait(
function(){
document.addEventListener('deviceready', this.onDeviceReady, false);
console.log('We are on Device');
}
);
}else
{
console.log('We are on Browser');
var _this = this;
setTimeout(function(){
_this.onDeviceReady();
}, 1);
}
console.log('app.initialize() Called');
$.when(deviceReadyDeferred, jqmReadyDeferred).then(this.doWhenBothFrameworksReady);
},
// deviceready Event Handler
onDeviceReady: function() {
console.log("onDeviceReady");
deviceReadyDeferred.resolve();
},
doWhenBothFrameworksReady: function()
{
console.log("doWhenBothFrameworksReady");
resourcesReady = true;
}
};
$(document).one("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.phonegapNavigationEnabled = true;
console.log('MobileInit');
jqmReadyDeferred.resolve();
});
function PageShowFunction(e)
{
// we are sure that both frameworks are ready here
}
function CallPageEvent(funcToCall,e)
{
if(resourcesReady)
{
return funcToCall(e);
}else
{
setTimeout(function() {
CallPageEvent(funcToCall,e);
}, 200);
}
}
$(document).ready(function () {
console.log("document ready");
// ALL the jQuery Mobile page events on pages must be attached here otherwise it will be too late
// example:
// I use the CallPageEvent beacause this event could be called before the device ready
/*
$("#page").on("pageshow", function(e) {
CallPageEvent(PageShowFunction,e);
}
*/
});
app.initialize();
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
