jQuery's .getScript()... what am I doing wrong?

Question

I'm programming an iPhone app with Phonegap. I have local .html and .js files. The following is in my index.html file:

function onBodyLoad() {
     document.addEventListener("deviceready", deviceReady, false);
}

function deviceReady() {
     $.getScript("js/order.js");
}

I researched and researched, but just can't figure out why my "order.js" file isn't getting called by the $.getScript method. Any ideas? Or is there any other way to call this .js file within the deviceReady function in my index.html?

Answer 1

For me the following solution worked very well.

1. Add a custom jQuery function that uses ajax and caches the loaded script:

   function init()
   {
       // Create a custom cached script importer based on ajax
       jQuery.cachedScript = function(url, options)
       {
           // Allow custom options, but dataType, cache and url are always predefined
           options = $.extend(options || {},
           {
               dataType: "script",
               cache: true,
               url: url
           });
           return jQuery.ajax(options);
       };
   
       importScripts();
   }
   

2. Import the scripts and optionally handle done and fail:

   function importScripts()
   {
       $.cachedScript("js/events.js")
           // Wait for the script to be loaded, before adding the listener
           .done(function()
           {
               document.addEventListener("deviceready", onDeviceReady, false);
           });
       $.cachedScript("js/navigation.js");
       $.cachedScript("js/mark.js");
   }
   

Thats it : ) More information may be found here.