Loading ...
Sorry, an error occurred while loading the content.

Re: Listener for Load() method

Expand Messages
  • Ben McClure
    I m having a lot of trouble figuring out how to load my scripts in the right order. I m outputting Load(); commands in a loop in the order that I want them,
    Message 1 of 6 , Apr 24, 2010
    • 0 Attachment
      I'm having a lot of trouble figuring out how to load my scripts in the right order.

      I'm outputting Load(); commands in a loop in the order that I want them, but the first scripts are not loaded by the time the following ones load, so there are errors in Chrome's javascript console about missing functions and such.

      One big advantage to using Ajile was that I could lazy-load my libraries so that the page loads faster initially... but I just can't seem to get it working right after a number of hours fidgeting with it.

      Is there a good way to do what I want?
    • Ben McClure
      I apologize if this is horrible code--I m relatively new to Javascript, but wanted to show you what isn t working in case I may have made a silly mistake.
      Message 2 of 6 , Apr 24, 2010
      • 0 Attachment
        I apologize if this is horrible code--I'm relatively new to Javascript, but wanted to show you what isn't working in case I may have made a silly mistake.

        Below is the class which handles loading of all required scripts (or at least is supposed to). The event listeners never fire, however.

        In each script that loads, at the bottom, I'm specifying, for example:

        var jQueryLoaded = true;

        if I load jQuery before loading Ajile, then listen for the 'jQueryLoaded' event, it fires. If I don't load it before-hand, however, and let Ajile load it with Include() or Load() the event never fires.

        Additionally, it seems it's trying to load all of the files at the same time, even though the later ones depend on the earlier ones. I need some sort of event listener to listen when each script's other required scripts are loaded, I think.

        ------------------------------------------------
        Namespace('com.singularityshift.webmanager');

        com.singularityshift.webmanager.Main = function() {
        var main = this;
        this.version = '0.0.1';
        this.ready = false;
        this.externalScripts = {
        'jquery': {
        script: "jquery-1.4.2.min",
        required: true,
        loaded: false,
        listen: 'jQueryLoaded'
        },
        'jquery.ui': {
        script: "jquery-ui-1.8.custom.min",
        required: true,
        loaded: false,
        listen: 'jQueryUiLoaded',
        requires: ['jquery']
        },
        'jquery.bgiframe': {
        script: "jquery.bgiframe-2.1.1",
        required: true,
        loaded: false,
        listen: 'jQueryBgiFrameLoaded',
        requires: ['jquery', 'jquery.ui']
        },
        'jquery.cookie': {
        script: "jquery.cookie",
        required: true,
        loaded: false,
        listen: 'jQueryCookieLoaded',
        requires: ['jquery', 'jquery.ui']
        },
        'jquery.metadata': {
        script: "jquery.metadata",
        required: true,
        loaded: false,
        listen: 'jQueryMetadataLoaded',
        requires: ['jquery', 'jquery.ui']
        }
        };

        function init() {
        loadExternalScripts();

        Ajile.AddImportListener(main.externalScripts['jquery'].listen, function() {
        jQuery.fn.log = function (msg) {
        if (console) {
        console.log("%s: %o", msg, this);
        }

        return this;
        };
        });
        };

        function loadExternalScripts() {
        for (var script in main.externalScripts) {
        loadExternalScript(script);
        };
        };

        function loadExternalScript(id) {
        scripts = main.externalScripts;
        ext = scripts[id];

        Include(ext.script, '/js/');
        alert(ext.script);

        Ajile.AddImportListener(ext.listen, function(event) {
        if (ext.loaded != true) {
        alert(ext.script);
        ext.loaded = true;
        isReady();
        }
        });
        };

        function isReady() {
        for (script in main.externalScripts) {
        if (script.required == true) {
        if (script.loaded != true) {
        main.ready = false;
        return false;
        }
        }
        }
        main.ready = true;
        return true;
        }

        init();
        };
      • Ben McClure
        I cannot find a good way to determine when an external script loaded with Load() is actually loaded... so I think I ll have to dump the use of Ajile for
        Message 3 of 6 , Apr 26, 2010
        • 0 Attachment
          I cannot find a good way to determine when an external script loaded with Load() is actually loaded... so I think I'll have to dump the use of Ajile for loading my files until I figure it out.

          It seems like great software and I still plan on using it for my namespaces and class loading, but there are a couple things I'm having trouble getting past:

          1. Namespaces are not hierarchal as they should be. Setting a namespace to load from directory ('/' separator) should take effect for all sub-namespaces defined afterward unless explicitely set... this doesn't work and it always defaults back to '.' notation instead.

          2. There is no way to tell when files loaded with Load() are ready for use. If there is a way, I am having a huge amount of trouble finding it--most of my weekend went toward figuring out how to best use Ajile to load my Javascript... and the entire weekend's work didn't really get me anywhere.
        • Ben McClure
          I m pretty surprised that nobody else has this issue or has found a workaround. It seems like such a basic requirement that, since the files are loaded in the
          Message 4 of 6 , May 10, 2010
          • 0 Attachment
            I'm pretty surprised that nobody else has this issue or has found a workaround. It seems like such a basic requirement that, since the files are loaded in the background, there should be some sort of event fired when the loading is complete. How else is it recommended to know when to call functions from within that loaded file?

            --- In ajile@yahoogroups.com, "Ben McClure" <digitalempire@...> wrote:
            >
            > I cannot find a good way to determine when an external script loaded with Load() is actually loaded... so I think I'll have to dump the use of Ajile for loading my files until I figure it out.
            >
            > It seems like great software and I still plan on using it for my namespaces and class loading, but there are a couple things I'm having trouble getting past:
            >
            > 1. Namespaces are not hierarchal as they should be. Setting a namespace to load from directory ('/' separator) should take effect for all sub-namespaces defined afterward unless explicitely set... this doesn't work and it always defaults back to '.' notation instead.
            >
            > 2. There is no way to tell when files loaded with Load() are ready for use. If there is a way, I am having a huge amount of trouble finding it--most of my weekend went toward figuring out how to best use Ajile to load my Javascript... and the entire weekend's work didn't really get me anywhere.
            >
          • mikeizworkin
            Hi Ben, Sorry I didn t write sooner. I haven t been able to dedicate as much time to Ajile since joining Palm a few months back; webOS keeps me pretty busy :-)
            Message 5 of 6 , May 10, 2010
            • 0 Attachment
              Hi Ben,

              Sorry I didn't write sooner. I haven't been able to dedicate as much time to Ajile since joining Palm a few months back; webOS keeps me pretty busy :-)

              Try the following:

              1. Add a listener for any globally accessible named value defined by the script you're loading. Based on your description, this would be a function name i.e.:

              Ajile.AddImportListener ("window.BensFunction", function (x){ alert ("Loaded "+x+"!"); } );

              2. Load the target script and use the Load directive's source parameter (third) to trigger listener notification i.e.:

              Load ("http://somewhere.com/BensStuff.js", null, "Import ('window');");

              This will trigger your listener once BensFunction becomes available.


              An explanation for this recommendation:

              Ajile is designed to support listening for data rather than resource availability. Using Ajile.AddImportListener (...) you can listen for named items that exist in the global scope. This makes it possible to receive notification not only at the moment the resource that defines your target data has completed loading, but anytime after as long as the data is named in the global scope.

              In Step 1 of the above recommended solution a listener is added for a function named "BensFunction" that's added to the global scope by BensStuff.js. The listener is set for "window.BensFunction" to work around a bug in how Ajile handles listening to single-level namespaced items like "BensFunction". To workaround that bug specify any globally named item that references the global scope (i.e. self, top, window) as the parent namespace of the target item (i.e. "window.BensFunction").

              In Step 2 Ajile's Load directive is used to simultaneously load an arbitrary script and execute arbitrary code. Load can be used to load script files and/or execute code in a single call. In this case we use it to load BensStuff.js as well as to trigger Ajile's listener notifications. The "Import ('window');" code jump starts Ajile's internal listener handling by importing an already available globally named item (i.e. window). The jump start isn't necessary when using Import, ImportAs, or Include because the targeted scripts use Ajile's API so the system is implicitly aware of targeted data's availability.

              I hope this recommendation and explanation helps you. If not I'm happy to elaborate or try a different approach.

              For an overview of Ajile's API and links to it's API docs see:

              http://ajile.net/docs/Ajile-Overview.htm

              For details on Ajile.AddImportListener() and Load() see:

              http://ajile.net/docs/api/Functions.htm#Ajile.AddImportListener
              http://ajile.net/docs/api/Directives.htm#Load


              Best of luck and thanks for using Ajile Ben!

              Mike


              --- In ajile@yahoogroups.com, "Ben McClure" <digitalempire@...> wrote:
              >
              > I'm pretty surprised that nobody else has this issue or has found a workaround. It seems like such a basic requirement that, since the files are loaded in the background, there should be some sort of event fired when the loading is complete. How else is it recommended to know when to call functions from within that loaded file?
              >
              > --- In ajile@yahoogroups.com, "Ben McClure" <digitalempire@> wrote:
              > >
              > > I cannot find a good way to determine when an external script loaded with Load() is actually loaded... so I think I'll have to dump the use of Ajile for loading my files until I figure it out.
              > >
              > > It seems like great software and I still plan on using it for my namespaces and class loading, but there are a couple things I'm having trouble getting past:
              > >
              > > 1. Namespaces are not hierarchal as they should be. Setting a namespace to load from directory ('/' separator) should take effect for all sub-namespaces defined afterward unless explicitely set... this doesn't work and it always defaults back to '.' notation instead.
              > >
              > > 2. There is no way to tell when files loaded with Load() are ready for use. If there is a way, I am having a huge amount of trouble finding it--most of my weekend went toward figuring out how to best use Ajile to load my Javascript... and the entire weekend's work didn't really get me anywhere.
              > >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.