Talk:On-Demand Javascript

From Ajax Patterns

On-Demand JavaScript...

While this sounds like a good idea it may actually be more complex a problem than it seems at first.

External JavaScript libraries are usually loaded by the browser as SSI's and cached to the client workstation. Subsequent calls are intercepted by the browser and the library is assumed to be in the cache.

--

Presumably it's okay if the response header indicates no-cache etc directives

Contents 1 Please correct the Link to MapBuilder. 2 Small errors in code 3 Conceptual Problem 4 Related pattern...

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

Please correct the Link to MapBuilder.

The URL http://mapbuilder.sourceforge.net/ needs a "http://" in Front of Chapter 7.1. --Maletin 10:34, 4 January 2006 (EST)

Small errors in code

 function ensureUploadScriptIsLoaded() {
   if (self.uploadMessages) { // Already exists
     return;
   }
   var head = document.getElementsByTagName("head")[0];
   script = document.createElement('script');
   script.id = 'uploadScript';
   script.type = 'text/javascript';
   script.src = "upload.js";
   head.appendChild(script)
 }

After adding 'var script' and a semicolon after the last statement:

 function ensureUploadScriptIsLoaded() {
   if (self.uploadMessages) { // Already exists
     return;
   }
   var head = document.getElementsByTagName("head")[0];
   var script = document.createElement('script');
   script.id = 'uploadScript';
   script.type = 'text/javascript';
   script.src = "upload.js";
   head.appendChild(script);
 }

Of course js will probably deal with these without any problem, just thought the example code should look as textbook as possible.

Conceptual Problem

On this page Loading External Data I found the following text: Even many DOM capable browsers will not run the contents of a script element that is is created using DOM methods after the page has loaded. The only way that JavaScript will reliably run a script is if the script is embedded in the page directly or via an external script file, while the page is loading.

My tests with firefox show the same behaviour. So adding a script tag to a completely rendered page did not execute the script. Checking with the DOM inspector confirms this. Or did I misunderstand something?

Try running the ajaxify.com demos shipped with this pattern. I'm not aware of any such problem on relatively modern browsers. Note the article you cite is pre-Ajax - Michael Mahemoff

Related pattern...

A pattern I have is at the end of each demand-loaded module's .js file, I put "moduleLoaded('filename.js');". Then, in my core library, I have something like the following:

 var moduleStatus = { };
 var moduleLoadListeners = { };
 function loadModule (filename, loadListener)
 {
    if (moduleStatus[filename] == 'loaded') 
    { 
       // module is already loaded: execute the listener immediately, and return
       if (loadListener) loadListener(); 
       return; 
    }
 
    // module isn't loaded: queue the listener up for when the module is loaded
    if (loadListener) addModuleLoadListener (filename, loadListener);
 
    // load the module if it isn't already
    if (moduleStatus[filename] == 'loading') return;
    moduleStatus[filename] = 'loading'; 
    // ... code to add a <script> tag for the module using the DOM goes here
 }
 function addModuleLoadListener (filename, listener)
 {
    // add listener to the list of listeners associated with the filename,
    // creating a new list if there isn't one...
 }
 function moduleLoaded (filename)
 {
    moduleStatus[filename] = loaded;
 
    // if there are any listeners for this filename, execute them...
 }