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

Bad interaction between addOnload() and ajile

Expand Messages
  • Yui-Wah Clement Lee
    Hi, I have two JSs each of them want to do something at the end of page load, and I am using the technique called addOnload(nF), which saves the old
    Message 1 of 5 , Jun 17 1:50 PM
      Hi,

      I have two JSs each of them want to do something at the end of page
      load, and I am using the technique called addOnload(nF), which saves
      the old window.onload function, and replaces it with a new anonymous
      function that will calls the old window.onload function as well as
      calling the new function nF.

      They work if I do not use Ajile. But if I use Ajile, the scripts
      will end up in an infinite loop.

      Did I do something wrong, or this is a limitation of Ajile?

      Here are the test programs that replicated the problem, together
      with their execution results. (I hope Yahoo!Group retains the
      indentation)

      Thanks!

      Clement Lee

      ==============================================================
      Part A: Not using Ajile, the two scripts work
      ==============================================================

      ---------
      test.html
      ---------
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html>
      <head>
      <meta content="text/html; charset=utf-8" http-equiv="content-
      type">

      <title>Test</title>
      <script type="text/javascript" src="/testA.js">
      </script>
      <script type="text/javascript" src="/testB.js">
      </script>
      </head>

      <body>
      A test page
      </body>
      </html>

      --------
      testA.js
      --------
      addOnload = function (newFunction) {

      alert("testA.js addOnload 1 ");
      var old1Onload = window.onload;
      alert("testA.js addOnload 2 ");

      if (typeof old1Onload != "function") {
      alert("testA.js addOnload 3 ");
      window.onload = newFunction;
      return;
      }
      alert("testA.js addOnload 4 ");

      window.onload = function() {
      alert("testA.js onload 5 ");
      if (old1Onload) {
      alert("testA.js onload 6 ");
      old1Onload(); // execute this old function first
      }
      alert("testA.js onload 7 ");
      newFunction();
      }
      };

      initAll = function () {
      alert("testA.js: initAll()");
      }
      addOnload(initAll);

      --------
      testB.js
      --------
      test = function () { alert("test!"); };

      addOnload = function (newFunction) {
      var old2Onload = window.onload;
      alert("testB.js addOnload 1");
      if (typeof old2Onload != "function") {
      alert("testB.js addOnload 2");
      window.onload = newFunction;
      return;
      }

      alert("testB.js addOnload 3");
      window.onload = function() {
      alert("testB.js onload 4");
      if (old2Onload) {
      alert("testB.js onload 5");
      old2Onload(); // execute this old function first
      }
      alert("testB.js onload 6");
      newFunction();
      alert("testB.js onload 7");
      }
      }

      addOnload(test);


      -------------------------------------------------------------
      Execution results (the alert windows will tell the following)
      -------------------------------------------------------------
      testA.js addOnload 1
      testA.js addOnload 2
      testA.js addOnload 3
      testB.js addOnload 1
      testB.js addOnload 3
      (The page finished loading,
      The content "A test page" was rendered on the browser window)
      testB.js onload 4
      testB.js onload 5
      testA.js initAll()
      testB.js onload 6
      test!
      testB.js onload 7


      ==============================================================
      Part B: Using Ajile, the scripts will go into an infinite loop
      ==============================================================

      --------------
      ajileTest.html
      --------------
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html>
      <head>
      <meta content="text/html; charset=utf-8" http-equiv="content-
      type">

      <title>Test</title>
      <script type="text/javascript" src="/ajile/com.iskitz.ajile.js?
      debug"
      </script>
      <script type="text/javascript" src="/ajileTestA.js">
      </script>
      <script type="text/javascript" src="/ajileTestB.js">
      </script>
      <!-- script type="text/javascript">
      Load ("/test2.js");
      </script -->
      </head>

      <body>
      A test page
      </body>
      </html>

      -------------
      ajileTestA.js
      -------------
      Namespace ("com.domain.proj");

      com.domain.proj.addOnload = function (newFunction) {

      alert("ajileTestA.js addOnload 1 ");
      var old1Onload = window.onload;
      alert("ajileTestA.js addOnload 2 ");

      if (typeof old1Onload != "function") {
      alert("ajileTestA.js addOnload 3 ");
      window.onload = newFunction;
      return;
      }
      alert("ajileTestA.js addOnload 4 ");

      window.onload = function() {
      alert("ajileTestA.js onload 5 ");
      if (old1Onload) {
      alert("ajileTestA.js onload 6 ");
      old1Onload(); // execute this old function first
      }
      alert("ajileTestA.js onload 7 ");
      newFunction();
      }
      };

      com.domain.proj.initAll = function () {
      alert("ajileTestA.js: initAll()");
      }
      com.domain.proj.addOnload(com.domain.proj.initAll);

      -------------
      ajileTestB.js
      -------------
      Namespace ("com.domain.proj.ns2");

      com.domain.proj.ns2.test = function () { alert("test!"); };
      com.domain.proj.ns2.addOnload = function (newFunction) {
      var old2Onload = window.onload;
      alert("ajileTestB.js addOnload 1");
      if (typeof old2Onload != "function") {
      alert("ajileTestB.js addOnload 2");
      window.onload = newFunction;
      return;
      }

      alert("ajileTestB.js addOnload 3");
      window.onload = function() {
      alert("ajileTestB.js onload 4");
      if (old2Onload) {
      alert("ajileTestB.js onload 5");
      old2Onload(); // execute this old function first
      }
      alert("ajileTestB.js onload 6");
      newFunction();
      alert("ajileTestB.js onload 7");
      }
      }

      com.domain.proj.ns2.addOnload(com.domain.proj.ns2.test);

      -------------------------------------------------------------
      Execution results (the alert windows will tell the following)
      -------------------------------------------------------------
      ajileTestA.js addOnload 1
      ajileTestA.js addOnload 2
      ajileTestA.js addOnload 4
      ajileTestB.js addOnload 1
      ajileTestB.js addOnload 3
      (The page finished loading,
      The content "A test page" was rendered on the browser window)
      ajileTestB.js onload 4
      ajileTestB.js onload 5
      ajileTestA.js onload 5
      ajileTestA.js onload 6
      ajileTestB.js onload 4 * loop started here
      ajileTestB.js onload 5
      ajileTestB.js onload 4
      ajileTestB.js onload 5
      ajileTestB.js onload 4
      ...
    • iskitzdev
      Hi Clement, Thanks for using Ajile and taking the time to post to this group. I ll look into the problem you reported today and get back to you as soon as I
      Message 2 of 5 , Jun 18 3:58 AM
        Hi Clement,
        Thanks for using Ajile and taking the time to post to this group.

        I'll look into the problem you reported today and get back to you as
        soon as I can.

        Looks like Yahoo! Groups completely ignored your indentation! . . .
        sorry :-(

        Luckily you can upload your files to the group here:

        http://tech.groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/

        As a member of the group you have the ability to create folders and
        upload files. Use the "Files" link in the left-hand menu to get to the
        uploads area.

        Be in touch!
        Mike

        --- In ajile@yahoogroups.com, "Yui-Wah Clement Lee" <leecy@...> wrote:
        >
        > Hi,
        >
        > I have two JSs each of them want to do something at the end of page
        > load, and I am using the technique called addOnload(nF), which saves
        > the old window.onload function, and replaces it with a new anonymous
        > function that will calls the old window.onload function as well as
        > calling the new function nF.
        >
        > They work if I do not use Ajile. But if I use Ajile, the scripts
        > will end up in an infinite loop.
        >
        > Did I do something wrong, or this is a limitation of Ajile?
        >
        > Here are the test programs that replicated the problem, together
        > with their execution results. (I hope Yahoo!Group retains the
        > indentation)
        >
        > Thanks!
        >
        > Clement Lee
        >
        > ==============================================================
        > Part A: Not using Ajile, the two scripts work
        > ==============================================================
        >
        > ---------
        > test.html
        > ---------
        > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        >
        > <html>
        > <head>
        > <meta content="text/html; charset=utf-8" http-equiv="content-
        > type">
        >
        > <title>Test</title>
        > <script type="text/javascript" src="/testA.js">
        > </script>
        > <script type="text/javascript" src="/testB.js">
        > </script>
        > </head>
        >
        > <body>
        > A test page
        > </body>
        > </html>
        >
        > --------
        > testA.js
        > --------
        > addOnload = function (newFunction) {
        >
        > alert("testA.js addOnload 1 ");
        > var old1Onload = window.onload;
        > alert("testA.js addOnload 2 ");
        >
        > if (typeof old1Onload != "function") {
        > alert("testA.js addOnload 3 ");
        > window.onload = newFunction;
        > return;
        > }
        > alert("testA.js addOnload 4 ");
        >
        > window.onload = function() {
        > alert("testA.js onload 5 ");
        > if (old1Onload) {
        > alert("testA.js onload 6 ");
        > old1Onload(); // execute this old function first
        > }
        > alert("testA.js onload 7 ");
        > newFunction();
        > }
        > };
        >
        > initAll = function () {
        > alert("testA.js: initAll()");
        > }
        > addOnload(initAll);
        >
        > --------
        > testB.js
        > --------
        > test = function () { alert("test!"); };
        >
        > addOnload = function (newFunction) {
        > var old2Onload = window.onload;
        > alert("testB.js addOnload 1");
        > if (typeof old2Onload != "function") {
        > alert("testB.js addOnload 2");
        > window.onload = newFunction;
        > return;
        > }
        >
        > alert("testB.js addOnload 3");
        > window.onload = function() {
        > alert("testB.js onload 4");
        > if (old2Onload) {
        > alert("testB.js onload 5");
        > old2Onload(); // execute this old function first
        > }
        > alert("testB.js onload 6");
        > newFunction();
        > alert("testB.js onload 7");
        > }
        > }
        >
        > addOnload(test);
        >
        >
        > -------------------------------------------------------------
        > Execution results (the alert windows will tell the following)
        > -------------------------------------------------------------
        > testA.js addOnload 1
        > testA.js addOnload 2
        > testA.js addOnload 3
        > testB.js addOnload 1
        > testB.js addOnload 3
        > (The page finished loading,
        > The content "A test page" was rendered on the browser window)
        > testB.js onload 4
        > testB.js onload 5
        > testA.js initAll()
        > testB.js onload 6
        > test!
        > testB.js onload 7
        >
        >
        > ==============================================================
        > Part B: Using Ajile, the scripts will go into an infinite loop
        > ==============================================================
        >
        > --------------
        > ajileTest.html
        > --------------
        > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        >
        > <html>
        > <head>
        > <meta content="text/html; charset=utf-8" http-equiv="content-
        > type">
        >
        > <title>Test</title>
        > <script type="text/javascript" src="/ajile/com.iskitz.ajile.js?
        > debug"
        > </script>
        > <script type="text/javascript" src="/ajileTestA.js">
        > </script>
        > <script type="text/javascript" src="/ajileTestB.js">
        > </script>
        > <!-- script type="text/javascript">
        > Load ("/test2.js");
        > </script -->
        > </head>
        >
        > <body>
        > A test page
        > </body>
        > </html>
        >
        > -------------
        > ajileTestA.js
        > -------------
        > Namespace ("com.domain.proj");
        >
        > com.domain.proj.addOnload = function (newFunction) {
        >
        > alert("ajileTestA.js addOnload 1 ");
        > var old1Onload = window.onload;
        > alert("ajileTestA.js addOnload 2 ");
        >
        > if (typeof old1Onload != "function") {
        > alert("ajileTestA.js addOnload 3 ");
        > window.onload = newFunction;
        > return;
        > }
        > alert("ajileTestA.js addOnload 4 ");
        >
        > window.onload = function() {
        > alert("ajileTestA.js onload 5 ");
        > if (old1Onload) {
        > alert("ajileTestA.js onload 6 ");
        > old1Onload(); // execute this old function first
        > }
        > alert("ajileTestA.js onload 7 ");
        > newFunction();
        > }
        > };
        >
        > com.domain.proj.initAll = function () {
        > alert("ajileTestA.js: initAll()");
        > }
        > com.domain.proj.addOnload(com.domain.proj.initAll);
        >
        > -------------
        > ajileTestB.js
        > -------------
        > Namespace ("com.domain.proj.ns2");
        >
        > com.domain.proj.ns2.test = function () { alert("test!"); };
        > com.domain.proj.ns2.addOnload = function (newFunction) {
        > var old2Onload = window.onload;
        > alert("ajileTestB.js addOnload 1");
        > if (typeof old2Onload != "function") {
        > alert("ajileTestB.js addOnload 2");
        > window.onload = newFunction;
        > return;
        > }
        >
        > alert("ajileTestB.js addOnload 3");
        > window.onload = function() {
        > alert("ajileTestB.js onload 4");
        > if (old2Onload) {
        > alert("ajileTestB.js onload 5");
        > old2Onload(); // execute this old function first
        > }
        > alert("ajileTestB.js onload 6");
        > newFunction();
        > alert("ajileTestB.js onload 7");
        > }
        > }
        >
        > com.domain.proj.ns2.addOnload(com.domain.proj.ns2.test);
        >
        > -------------------------------------------------------------
        > Execution results (the alert windows will tell the following)
        > -------------------------------------------------------------
        > ajileTestA.js addOnload 1
        > ajileTestA.js addOnload 2
        > ajileTestA.js addOnload 4
        > ajileTestB.js addOnload 1
        > ajileTestB.js addOnload 3
        > (The page finished loading,
        > The content "A test page" was rendered on the browser window)
        > ajileTestB.js onload 4
        > ajileTestB.js onload 5
        > ajileTestA.js onload 5
        > ajileTestA.js onload 6
        > ajileTestB.js onload 4 * loop started here
        > ajileTestB.js onload 5
        > ajileTestB.js onload 4
        > ajileTestB.js onload 5
        > ajileTestB.js onload 4
        > ...
        >
      • Clement Yui-Wah Lee
        Mike, Thanks for making Ajile. I like the idea and hope I can put it to use in my project. I have uploaded the files to the directory. I uploaded both the
        Message 3 of 5 , Jun 18 8:22 AM
          Mike,

          Thanks for making Ajile. I like the idea and hope I can put it to use in my
          project.

          I have uploaded the files to the directory. I uploaded both the six test files
          as well as a zip file that contains the six test files.

          http://tech.groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/InteractionWithAddOnload/

          Clement

          iskitzdev wrote:
          >
          >
          > Hi Clement,
          > Thanks for using Ajile and taking the time to post to this group.
          >
          > I'll look into the problem you reported today and get back to you as
          > soon as I can.
          >
          > Looks like Yahoo! Groups completely ignored your indentation! . . .
          > sorry :-(
          >
          > Luckily you can upload your files to the group here:
          >
          > http://tech.groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/
          > <http://tech.groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/>
          >
          > As a member of the group you have the ability to create folders and
          > upload files. Use the "Files" link in the left-hand menu to get to the
          > uploads area.
          >
          > Be in touch!
          > Mike
          >
          > --- In ajile@yahoogroups.com <mailto:ajile%40yahoogroups.com>, "Yui-Wah
          > Clement Lee" <leecy@...> wrote:
          > >
          > > Hi,
          > >
          > > I have two JSs each of them want to do something at the end of page
          > > load, and I am using the technique called addOnload(nF), which saves
          > > the old window.onload function, and replaces it with a new anonymous
          > > function that will calls the old window.onload function as well as
          > > calling the new function nF.
          > >
          > > They work if I do not use Ajile. But if I use Ajile, the scripts
          > > will end up in an infinite loop.
          > >
          > > Did I do something wrong, or this is a limitation of Ajile?
          > >
          > > Here are the test programs that replicated the problem, together
          > > with their execution results. (I hope Yahoo!Group retains the
          > > indentation)
          > >
          > > Thanks!
          > >
          > > Clement Lee
          > >
          > > ==============================================================
          > > Part A: Not using Ajile, the two scripts work
          > > ==============================================================
          > >
          > > ---------
          > > test.html
          > > ---------
          > > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          > >
          > > <html>
          > > <head>
          > > <meta content="text/html; charset=utf-8" http-equiv="content-
          > > type">
          > >
          > > <title>Test</title>
          > > <script type="text/javascript" src="/testA.js">
          > > </script>
          > > <script type="text/javascript" src="/testB.js">
          > > </script>
          > > </head>
          > >
          > > <body>
          > > A test page
          > > </body>
          > > </html>
          > >
          > > --------
          > > testA.js
          > > --------
          > > addOnload = function (newFunction) {
          > >
          > > alert("testA.js addOnload 1 ");
          > > var old1Onload = window.onload;
          > > alert("testA.js addOnload 2 ");
          > >
          > > if (typeof old1Onload != "function") {
          > > alert("testA.js addOnload 3 ");
          > > window.onload = newFunction;
          > > return;
          > > }
          > > alert("testA.js addOnload 4 ");
          > >
          > > window.onload = function() {
          > > alert("testA.js onload 5 ");
          > > if (old1Onload) {
          > > alert("testA.js onload 6 ");
          > > old1Onload(); // execute this old function first
          > > }
          > > alert("testA.js onload 7 ");
          > > newFunction();
          > > }
          > > };
          > >
          > > initAll = function () {
          > > alert("testA.js: initAll()");
          > > }
          > > addOnload(initAll);
          > >
          > > --------
          > > testB.js
          > > --------
          > > test = function () { alert("test!"); };
          > >
          > > addOnload = function (newFunction) {
          > > var old2Onload = window.onload;
          > > alert("testB.js addOnload 1");
          > > if (typeof old2Onload != "function") {
          > > alert("testB.js addOnload 2");
          > > window.onload = newFunction;
          > > return;
          > > }
          > >
          > > alert("testB.js addOnload 3");
          > > window.onload = function() {
          > > alert("testB.js onload 4");
          > > if (old2Onload) {
          > > alert("testB.js onload 5");
          > > old2Onload(); // execute this old function first
          > > }
          > > alert("testB.js onload 6");
          > > newFunction();
          > > alert("testB.js onload 7");
          > > }
          > > }
          > >
          > > addOnload(test);
          > >
          > >
          > > ----------------------------------------------------------
          > > Execution results (the alert windows will tell the following)
          > > ----------------------------------------------------------
          > > testA.js addOnload 1
          > > testA.js addOnload 2
          > > testA.js addOnload 3
          > > testB.js addOnload 1
          > > testB.js addOnload 3
          > > (The page finished loading,
          > > The content "A test page" was rendered on the browser window)
          > > testB.js onload 4
          > > testB.js onload 5
          > > testA.js initAll()
          > > testB.js onload 6
          > > test!
          > > testB.js onload 7
          > >
          > >
          > > ==============================================================
          > > Part B: Using Ajile, the scripts will go into an infinite loop
          > > ==============================================================
          > >
          > > --------------
          > > ajileTest.html
          > > --------------
          > > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          > >
          > > <html>
          > > <head>
          > > <meta content="text/html; charset=utf-8" http-equiv="content-
          > > type">
          > >
          > > <title>Test</title>
          > > <script type="text/javascript" src="/ajile/com.iskitz.ajile.js?
          > > debug"
          > > </script>
          > > <script type="text/javascript" src="/ajileTestA.js">
          > > </script>
          > > <script type="text/javascript" src="/ajileTestB.js">
          > > </script>
          > > <!-- script type="text/javascript">
          > > Load ("/test2.js");
          > > </script -->
          > > </head>
          > >
          > > <body>
          > > A test page
          > > </body>
          > > </html>
          > >
          > > -------------
          > > ajileTestA.js
          > > -------------
          > > Namespace ("com.domain.proj");
          > >
          > > com.domain.proj.addOnload = function (newFunction) {
          > >
          > > alert("ajileTestA.js addOnload 1 ");
          > > var old1Onload = window.onload;
          > > alert("ajileTestA.js addOnload 2 ");
          > >
          > > if (typeof old1Onload != "function") {
          > > alert("ajileTestA.js addOnload 3 ");
          > > window.onload = newFunction;
          > > return;
          > > }
          > > alert("ajileTestA.js addOnload 4 ");
          > >
          > > window.onload = function() {
          > > alert("ajileTestA.js onload 5 ");
          > > if (old1Onload) {
          > > alert("ajileTestA.js onload 6 ");
          > > old1Onload(); // execute this old function first
          > > }
          > > alert("ajileTestA.js onload 7 ");
          > > newFunction();
          > > }
          > > };
          > >
          > > com.domain.proj.initAll = function () {
          > > alert("ajileTestA.js: initAll()");
          > > }
          > > com.domain.proj.addOnload(com.domain.proj.initAll);
          > >
          > > -------------
          > > ajileTestB.js
          > > -------------
          > > Namespace ("com.domain.proj.ns2");
          > >
          > > com.domain.proj.ns2.test = function () { alert("test!"); };
          > > com.domain.proj.ns2.addOnload = function (newFunction) {
          > > var old2Onload = window.onload;
          > > alert("ajileTestB.js addOnload 1");
          > > if (typeof old2Onload != "function") {
          > > alert("ajileTestB.js addOnload 2");
          > > window.onload = newFunction;
          > > return;
          > > }
          > >
          > > alert("ajileTestB.js addOnload 3");
          > > window.onload = function() {
          > > alert("ajileTestB.js onload 4");
          > > if (old2Onload) {
          > > alert("ajileTestB.js onload 5");
          > > old2Onload(); // execute this old function first
          > > }
          > > alert("ajileTestB.js onload 6");
          > > newFunction();
          > > alert("ajileTestB.js onload 7");
          > > }
          > > }
          > >
          > > com.domain.proj.ns2.addOnload(com.domain.proj.ns2.test);
          > >
          > > ----------------------------------------------------------
          > > Execution results (the alert windows will tell the following)
          > > ----------------------------------------------------------
          > > ajileTestA.js addOnload 1
          > > ajileTestA.js addOnload 2
          > > ajileTestA.js addOnload 4
          > > ajileTestB.js addOnload 1
          > > ajileTestB.js addOnload 3
          > > (The page finished loading,
          > > The content "A test page" was rendered on the browser window)
          > > ajileTestB.js onload 4
          > > ajileTestB.js onload 5
          > > ajileTestA.js onload 5
          > > ajileTestA.js onload 6
          > > ajileTestB.js onload 4 * loop started here
          > > ajileTestB.js onload 5
          > > ajileTestB.js onload 4
          > > ajileTestB.js onload 5
          > > ajileTestB.js onload 4
          > > ...
          > >
          >
          >
        • iskitzdev
          Hi Clement, I took a look at your files. Thanks for taking the time to put them together. First, please download and unzip the following zip file and try it s
          Message 4 of 5 , Jun 19 5:39 PM
            Hi Clement,
            I took a look at your files. Thanks for taking the time to put them
            together.

            First, please download and unzip the following zip file and try it's
            contents:

            http://groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/InteractionWithAddOnload/ajile.4.clement.lee.zip

            The zip contains a modified version of Ajile that bypasses 1.2.1's use
            of window.onload. I also renamed some of your files and modified them
            to make use of Ajile's auto-loading functionality.

            Now that that's done, there are a few things I'd like to say:

            I'm not sure if you were simply trying to blackbox test Ajile's use of
            window.onload or if you have a legitimate scenario where the amount of
            onload switching shown in your code occurs, but my recommendation is this:

            Use window.addEventListener(...) instead of assigning handlers to the
            onload event.

            Unless your project needs to support legacy/non-DOM compliant browsers
            lacking addEvenListener support it's definitely the recommended
            approach for onload event handling.

            Ajile aims to be as cross-browser as possible and so version 1.2.1 and
            earlier attach a handler to window.onload as a fail-safe to guarantee
            script loading in legacy browsers. Your sample code is a bit involved,
            but demonstrates the kind of confusion using window.onload can cause.
            It's a great example of why addEventListener was created and is
            recommended :-)

            Ajile's next release takes a different approach to guranteed dynamic
            loading for legacy browsers and so won't use window.onload as a fail-safe.

            I hope the patched Ajile 1.2.2a meets your needs.

            Thanks again for using Ajile and for posting to this group. I'm always
            interested in feedback about Ajile.

            Good luck!

            -Mike

            --- In ajile@yahoogroups.com, Clement Yui-Wah Lee <leecy@...> wrote:
            >
            > Mike,
            >
            > Thanks for making Ajile. I like the idea and hope I can put it to
            use in my
            > project.
            >
            > I have uploaded the files to the directory. I uploaded both the six
            test files
            > as well as a zip file that contains the six test files.
            >
            >
            http://tech.groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/InteractionWithAddOnload/
            >
            > Clement
            >
            > iskitzdev wrote:
            > >
            > >
            > > Hi Clement,
            > > Thanks for using Ajile and taking the time to post to this group.
            > >
            > > I'll look into the problem you reported today and get back to you as
            > > soon as I can.
            > >
            > > Looks like Yahoo! Groups completely ignored your indentation! . . .
            > > sorry :-(
            > >
            > > Luckily you can upload your files to the group here:
            > >
            > > http://tech.groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/
            > >
            <http://tech.groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/>
            > >
            > > As a member of the group you have the ability to create folders and
            > > upload files. Use the "Files" link in the left-hand menu to get to the
            > > uploads area.
            > >
            > > Be in touch!
            > > Mike
            > >
            > > --- In ajile@yahoogroups.com <mailto:ajile%40yahoogroups.com>,
            "Yui-Wah
            > > Clement Lee" <leecy@> wrote:
            > > >
            > > > Hi,
            > > >
            > > > I have two JSs each of them want to do something at the end of page
            > > > load, and I am using the technique called addOnload(nF), which
            saves
            > > > the old window.onload function, and replaces it with a new
            anonymous
            > > > function that will calls the old window.onload function as well as
            > > > calling the new function nF.
            > > >
            > > > They work if I do not use Ajile. But if I use Ajile, the scripts
            > > > will end up in an infinite loop.
            > > >
            > > > Did I do something wrong, or this is a limitation of Ajile?
            > > >
            > > > Here are the test programs that replicated the problem, together
            > > > with their execution results. (I hope Yahoo!Group retains the
            > > > indentation)
            > > >
            > > > Thanks!
            > > >
            > > > Clement Lee
            > > >
            > > > ==============================================================
            > > > Part A: Not using Ajile, the two scripts work
            > > > ==============================================================
            > > >
            > > > ---------
            > > > test.html
            > > > ---------
            > > > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            > > >
            > > > <html>
            > > > <head>
            > > > <meta content="text/html; charset=utf-8" http-equiv="content-
            > > > type">
            > > >
            > > > <title>Test</title>
            > > > <script type="text/javascript" src="/testA.js">
            > > > </script>
            > > > <script type="text/javascript" src="/testB.js">
            > > > </script>
            > > > </head>
            > > >
            > > > <body>
            > > > A test page
            > > > </body>
            > > > </html>
            > > >
            > > > --------
            > > > testA.js
            > > > --------
            > > > addOnload = function (newFunction) {
            > > >
            > > > alert("testA.js addOnload 1 ");
            > > > var old1Onload = window.onload;
            > > > alert("testA.js addOnload 2 ");
            > > >
            > > > if (typeof old1Onload != "function") {
            > > > alert("testA.js addOnload 3 ");
            > > > window.onload = newFunction;
            > > > return;
            > > > }
            > > > alert("testA.js addOnload 4 ");
            > > >
            > > > window.onload = function() {
            > > > alert("testA.js onload 5 ");
            > > > if (old1Onload) {
            > > > alert("testA.js onload 6 ");
            > > > old1Onload(); // execute this old function first
            > > > }
            > > > alert("testA.js onload 7 ");
            > > > newFunction();
            > > > }
            > > > };
            > > >
            > > > initAll = function () {
            > > > alert("testA.js: initAll()");
            > > > }
            > > > addOnload(initAll);
            > > >
            > > > --------
            > > > testB.js
            > > > --------
            > > > test = function () { alert("test!"); };
            > > >
            > > > addOnload = function (newFunction) {
            > > > var old2Onload = window.onload;
            > > > alert("testB.js addOnload 1");
            > > > if (typeof old2Onload != "function") {
            > > > alert("testB.js addOnload 2");
            > > > window.onload = newFunction;
            > > > return;
            > > > }
            > > >
            > > > alert("testB.js addOnload 3");
            > > > window.onload = function() {
            > > > alert("testB.js onload 4");
            > > > if (old2Onload) {
            > > > alert("testB.js onload 5");
            > > > old2Onload(); // execute this old function first
            > > > }
            > > > alert("testB.js onload 6");
            > > > newFunction();
            > > > alert("testB.js onload 7");
            > > > }
            > > > }
            > > >
            > > > addOnload(test);
            > > >
            > > >
            > > > ----------------------------------------------------------
            > > > Execution results (the alert windows will tell the following)
            > > > ----------------------------------------------------------
            > > > testA.js addOnload 1
            > > > testA.js addOnload 2
            > > > testA.js addOnload 3
            > > > testB.js addOnload 1
            > > > testB.js addOnload 3
            > > > (The page finished loading,
            > > > The content "A test page" was rendered on the browser window)
            > > > testB.js onload 4
            > > > testB.js onload 5
            > > > testA.js initAll()
            > > > testB.js onload 6
            > > > test!
            > > > testB.js onload 7
            > > >
            > > >
            > > > ==============================================================
            > > > Part B: Using Ajile, the scripts will go into an infinite loop
            > > > ==============================================================
            > > >
            > > > --------------
            > > > ajileTest.html
            > > > --------------
            > > > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            > > >
            > > > <html>
            > > > <head>
            > > > <meta content="text/html; charset=utf-8" http-equiv="content-
            > > > type">
            > > >
            > > > <title>Test</title>
            > > > <script type="text/javascript" src="/ajile/com.iskitz.ajile.js?
            > > > debug"
            > > > </script>
            > > > <script type="text/javascript" src="/ajileTestA.js">
            > > > </script>
            > > > <script type="text/javascript" src="/ajileTestB.js">
            > > > </script>
            > > > <!-- script type="text/javascript">
            > > > Load ("/test2.js");
            > > > </script -->
            > > > </head>
            > > >
            > > > <body>
            > > > A test page
            > > > </body>
            > > > </html>
            > > >
            > > > -------------
            > > > ajileTestA.js
            > > > -------------
            > > > Namespace ("com.domain.proj");
            > > >
            > > > com.domain.proj.addOnload = function (newFunction) {
            > > >
            > > > alert("ajileTestA.js addOnload 1 ");
            > > > var old1Onload = window.onload;
            > > > alert("ajileTestA.js addOnload 2 ");
            > > >
            > > > if (typeof old1Onload != "function") {
            > > > alert("ajileTestA.js addOnload 3 ");
            > > > window.onload = newFunction;
            > > > return;
            > > > }
            > > > alert("ajileTestA.js addOnload 4 ");
            > > >
            > > > window.onload = function() {
            > > > alert("ajileTestA.js onload 5 ");
            > > > if (old1Onload) {
            > > > alert("ajileTestA.js onload 6 ");
            > > > old1Onload(); // execute this old function first
            > > > }
            > > > alert("ajileTestA.js onload 7 ");
            > > > newFunction();
            > > > }
            > > > };
            > > >
            > > > com.domain.proj.initAll = function () {
            > > > alert("ajileTestA.js: initAll()");
            > > > }
            > > > com.domain.proj.addOnload(com.domain.proj.initAll);
            > > >
            > > > -------------
            > > > ajileTestB.js
            > > > -------------
            > > > Namespace ("com.domain.proj.ns2");
            > > >
            > > > com.domain.proj.ns2.test = function () { alert("test!"); };
            > > > com.domain.proj.ns2.addOnload = function (newFunction) {
            > > > var old2Onload = window.onload;
            > > > alert("ajileTestB.js addOnload 1");
            > > > if (typeof old2Onload != "function") {
            > > > alert("ajileTestB.js addOnload 2");
            > > > window.onload = newFunction;
            > > > return;
            > > > }
            > > >
            > > > alert("ajileTestB.js addOnload 3");
            > > > window.onload = function() {
            > > > alert("ajileTestB.js onload 4");
            > > > if (old2Onload) {
            > > > alert("ajileTestB.js onload 5");
            > > > old2Onload(); // execute this old function first
            > > > }
            > > > alert("ajileTestB.js onload 6");
            > > > newFunction();
            > > > alert("ajileTestB.js onload 7");
            > > > }
            > > > }
            > > >
            > > > com.domain.proj.ns2.addOnload(com.domain.proj.ns2.test);
            > > >
            > > > ----------------------------------------------------------
            > > > Execution results (the alert windows will tell the following)
            > > > ----------------------------------------------------------
            > > > ajileTestA.js addOnload 1
            > > > ajileTestA.js addOnload 2
            > > > ajileTestA.js addOnload 4
            > > > ajileTestB.js addOnload 1
            > > > ajileTestB.js addOnload 3
            > > > (The page finished loading,
            > > > The content "A test page" was rendered on the browser window)
            > > > ajileTestB.js onload 4
            > > > ajileTestB.js onload 5
            > > > ajileTestA.js onload 5
            > > > ajileTestA.js onload 6
            > > > ajileTestB.js onload 4 * loop started here
            > > > ajileTestB.js onload 5
            > > > ajileTestB.js onload 4
            > > > ajileTestB.js onload 5
            > > > ajileTestB.js onload 4
            > > > ...
            > > >
            > >
            > >
            >
          • Clement Yui-Wah Lee
            Mike, Thanks! Will try it out when I get a chance. Clement
            Message 5 of 5 , Jun 20 9:30 PM
              Mike,

              Thanks! Will try it out when I get a chance.

              Clement

              iskitzdev wrote:
              >
              >
              > Hi Clement,
              > I took a look at your files. Thanks for taking the time to put them
              > together.
              >
              > First, please download and unzip the following zip file and try it's
              > contents:
              >
              > http://groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/InteractionWithAddOnload/ajile.4.clement.lee.zip
              > <http://groups.yahoo.com/group/ajile/files/Ajile%20Tests/Clement/InteractionWithAddOnload/ajile.4.clement.lee.zip>
              >
              > The zip contains a modified version of Ajile that bypasses 1.2.1's use
              > of window.onload. I also renamed some of your files and modified them
              > to make use of Ajile's auto-loading functionality.
              >
              > Now that that's done, there are a few things I'd like to say:
              >
              > I'm not sure if you were simply trying to blackbox test Ajile's use of
              > window.onload or if you have a legitimate scenario where the amount of
              > onload switching shown in your code occurs, but my recommendation is this:
              >
              > Use window.addEventListener(...) instead of assigning handlers to the
              > onload event.
              >
              > Unless your project needs to support legacy/non-DOM compliant browsers
              > lacking addEvenListener support it's definitely the recommended
              > approach for onload event handling.
              >
              > Ajile aims to be as cross-browser as possible and so version 1.2.1 and
              > earlier attach a handler to window.onload as a fail-safe to guarantee
              > script loading in legacy browsers. Your sample code is a bit involved,
              > but demonstrates the kind of confusion using window.onload can cause.
              > It's a great example of why addEventListener was created and is
              > recommended :-)
              >
              > Ajile's next release takes a different approach to guranteed dynamic
              > loading for legacy browsers and so won't use window.onload as a fail-safe.
              >
              > I hope the patched Ajile 1.2.2a meets your needs.
              >
              > Thanks again for using Ajile and for posting to this group. I'm always
              > interested in feedback about Ajile.
              >
              > Good luck!
              >
              > -Mike
            Your message has been successfully submitted and would be delivered to recipients shortly.