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, 2008
    View Source
    • 0 Attachment
      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, 2008
      View Source
      • 0 Attachment
        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, 2008
        View Source
        • 0 Attachment
          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, 2008
          View Source
          • 0 Attachment
            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, 2008
            View Source
            • 0 Attachment
              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.