20 Recipes for Programming PhoneGap

1.6. Executing a Callback Function Once the Device Is Ready

Problem

After a page has loaded, you will want to execute some JavaScript code immediately without invoking it manually each time in your JavaScript code.

Solution

Because HTML doesn’t allow for a lot of dynamic features, a lot of code needs to be duplicated. To minimize the page load times, you should load the minimal amount of content each time while reusing as much code as you can. The common.js JavaScript file must be kept lightweight, and additional JavaScript files should be created for other new functionality. However, there currently is no process to allow for additional function calls once the application has determined that the device is ready.

You can update the common.js JavaScript file with an automatic callback function that will be executed once the common code to detect the device type, network connection, etc., has finished working. This will enable you to use the same process in many future recipes.

Discussion

Because the application is using jQuery mobile, you must reorganize some of the existing code in order to improve code loading. When you navigate between pages using jQuery mobile, it performs the request via AJAX and strips all of the content from the HTML file (unless it is within a div tag that contains a data-role of type page). This means that the previous window.onload event will no longer trigger. Instead, a new event that is provided by the jQuery mobile library will be used.

The first thing to ...