jquery mobile function running before the device ready

Question

I am building an android application using phonegap, and jQuery Mobile.

From phonegap documentation, device ready function needs to be fired first before anything else.

I have no idea why but

$(document).on("pageshow", "#keeperList", function(){ 
listAllKeepers();
});

is firing first.

I cannot post whole code, since it is too much.

 <script type="text/javascript" src="js/cordova.js"></script>
 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
 <script type="text/javascript" src="js/db.js"></script>
 <script type="text/javascript">

 var db;
 document.addEventListener("deviceready", onDeviceReady, false);

 function onDeviceReady() {
 alert("PhoneGap is ready!");
 db = window.openDatabase("rentManag", "3.7.11", "Rent Manag", 100000000);
 db.transaction(createTable, errorCB, successCB);
 }
 $(document).on('pageshow', "#keeperList", function () { 
 listAllKeepers();
 });
 </script>

Answer 1

You have to wait for the JQuery Mobile "pagecreate" and Phonegap "deviceready" event if you're using phonegap in combination with JQuery Mobile. This ensures that both frameworks are properly loaded. This is how you do it:

var jqmReady = $.Deferred();
var pgReady = $.Deferred();

// jqm ready
$(document).bind("pagecreate", jqmReady.resolve);

// phonegap ready
document.addEventListener("deviceready", pgReady.resolve, false);
$(document).on('pagecreate',function(event,data)
                 {


                 });
// all ready :)
$.when(jqmReady, pgReady).then(function () {
          listAllKeepers();
                               });

Answer 2

To give an answer on your question, check this code below. It is a work-around I use myself. It is likely not the best solution, but it gets the job done.

What does it do: - On device ready it sets a value to true. - On page load you access a function that waits on that value being true. If not, it loops until it is. - This prevents errors that stuff is not being loaded by PhoneGap yet.

// device ready document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // let the function "isDeviceReady" know that the event "deviceready" has been fired window.deviceReady = true; }

// callback function to check if device is ready function isDeviceReady(value, action) { if (window.deviceReady === true) { switch (action) { case "listAllKeepers": listAllKeepers(); break; case "listAllKeepersValue": // if you had a value listAllKeepers(value); break; } } else { window.setTimeout("isDeviceReady(\\"" + value + "\\", \\"" + action + "\\");", 100); } }

// do stuff on page show $(document).on('pagebeforeshow', '#yourpageid', function (event, data) { isDeviceReady('', listAllKeepers); });