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

YUI Loader constructor problem

Expand Messages
  • kakar0to
    I am using YUI 2.3.1 with the YUI Loader module. So it was pretty simple to setup a config object and initiate the loader which was going to load all required
    Message 1 of 8 , Dec 24, 2007
    • 0 Attachment
      I am using YUI 2.3.1 with the YUI Loader module.
      So it was pretty simple to setup a config object and initiate the
      loader which was going to load all required files from the given source.

      When YUI 2.4.0 was released i was exited about the new changes and
      tryed to use them on my script but without any luck.
      My current problem is the onSuccess callback funtion insie the loader.
      It seems to insist on initiating the objects i am loading with the YUI
      Loader. I have tryed many example scripts without any luck to get them
      working the way they used to work.

      Here i an example i was working with.


      <body class="yui-skin-sam">
      <script type="text/javascript"
      src="../build/yuiloader/yuiloader-beta.js"></script>

      <div id="tabContainer"></div>

      <script type="text/javascript">

      loader = new YAHOO.util.YUILoader();
      loader.require("tabview");
      loader.base = "../build/";
      loader.loadOptional = true;
      loader.insert({ onSuccess: function() {
      //YAHOO.example.tabviewinit(); //WHEN USEING THIS CALLBACK EVERYTHING
      IS FINE!!!
      }});

      YAHOO.example.tabviewinit = function( ){
      var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );

      tabView.addTab( new YAHOO.widget.Tab({
      label: 'lorem',
      content: '<p>Lorem ipsum dolor sit amet...</p>',
      active: true
      }));

      tabView.addTab( new YAHOO.widget.Tab({
      label: 'ipsum',
      content: '<p>Lorem ipsum dolor sit amet...</p>',
      }));

      tabView.addTab( new YAHOO.widget.Tab({
      label: 'dolor',
      content: '<p>Lorem ipsum dolor sit amet...</p>',
      }));
      tabView.appendTo('tabContainer');
      };


      YAHOO.example.tabviewinit(); //This is what i want to execute.

      </script>
      </body>

      My goal is to load all the sources i need and then initiate the object
      whenever it pleases me :) not relying on the OnSuccess.

      Please give me some help on this one.
    • Satyam
      Nothing of what you ask is going to be loaded until the onSuccess callback is called, that is the signal for you to know that everything has been loaded. You
      Message 2 of 8 , Dec 24, 2007
      • 0 Attachment
        Nothing of what you ask is going to be loaded until the onSuccess callback
        is called, that is the signal for you to know that everything has been
        loaded. You don't need to call tabviewinit from within the onSuccess
        function but you cannot call it before onSuccess has been called, meaning,
        you can leave a flag somewhere signaling that everything is loaded, or you
        can also check YAHOO.env.modules to see if what you have asked for is
        already there.

        Satyam

        ----- Original Message -----
        From: "kakar0to" <kakar0to@...>
        To: <ydn-javascript@yahoogroups.com>
        Sent: Monday, December 24, 2007 12:48 PM
        Subject: [ydn-javascript] YUI Loader constructor problem


        >I am using YUI 2.3.1 with the YUI Loader module.
        > So it was pretty simple to setup a config object and initiate the
        > loader which was going to load all required files from the given source.
        >
        > When YUI 2.4.0 was released i was exited about the new changes and
        > tryed to use them on my script but without any luck.
        > My current problem is the onSuccess callback funtion insie the loader.
        > It seems to insist on initiating the objects i am loading with the YUI
        > Loader. I have tryed many example scripts without any luck to get them
        > working the way they used to work.
        >
        > Here i an example i was working with.
        >
        >
        > <body class="yui-skin-sam">
        > <script type="text/javascript"
        > src="../build/yuiloader/yuiloader-beta.js"></script>
        >
        > <div id="tabContainer"></div>
        >
        > <script type="text/javascript">
        >
        > loader = new YAHOO.util.YUILoader();
        > loader.require("tabview");
        > loader.base = "../build/";
        > loader.loadOptional = true;
        > loader.insert({ onSuccess: function() {
        > //YAHOO.example.tabviewinit(); //WHEN USEING THIS CALLBACK EVERYTHING
        > IS FINE!!!
        > }});
        >
        > YAHOO.example.tabviewinit = function( ){
        > var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );
        >
        > tabView.addTab( new YAHOO.widget.Tab({
        > label: 'lorem',
        > content: '<p>Lorem ipsum dolor sit amet...</p>',
        > active: true
        > }));
        >
        > tabView.addTab( new YAHOO.widget.Tab({
        > label: 'ipsum',
        > content: '<p>Lorem ipsum dolor sit amet...</p>',
        > }));
        >
        > tabView.addTab( new YAHOO.widget.Tab({
        > label: 'dolor',
        > content: '<p>Lorem ipsum dolor sit amet...</p>',
        > }));
        > tabView.appendTo('tabContainer');
        > };
        >
        >
        > YAHOO.example.tabviewinit(); //This is what i want to execute.
        >
        > </script>
        > </body>
        >
        > My goal is to load all the sources i need and then initiate the object
        > whenever it pleases me :) not relying on the OnSuccess.
        >
        > Please give me some help on this one.
        >
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        > --
        > No virus found in this incoming message.
        > Checked by AVG Free Edition.
        > Version: 7.5.516 / Virus Database: 269.17.7/1194 - Release Date:
        > 23/12/2007 17:27
        >
        >
      • Alan Pinstein
        Yeah, this is really complex. There are 2 asynchronous events that are happening and you cannot guarantee the timing of them. So YUILoader.insert() runs, but
        Message 3 of 8 , Dec 24, 2007
        • 0 Attachment
          Yeah, this is really complex. There are 2 asynchronous events that are happening and you cannot guarantee the timing of them. So 

          YUILoader.insert() runs, but it calls the onSuccess asynchronously, which means that your YAHOO.example.tabviewinit() might be executed before the code is ready.

          Also, you can't define your YAHOO.example.tabviewinit() until the dependencies are loaded or you'll get a parse error.

          So, your YAHOO.example.tabviewinit() method needs to actually be defined in your onSuccess callback. Then, after that, you can call your init method.

          The way I deal with it quite simply is to:

          1) Use YUILoader to load dependencies, and in the onSuccess callback...
          2) I define the functions that call the methods loaded by the dependencies, including my init() function... then I install a YAHOO.util.Event.onContentReady() for the DOM content I want to "YUI-ify", which...
          3) Will call my init() method.

          This is the only way to avoid all race conditions.

          Alan

          On Dec 24, 2007, at 8:43 AM, Satyam wrote:

          Nothing of what you ask is going to be loaded until the onSuccess callback 
          is called, that is the signal for you to know that everything has been 
          loaded. You don't need to call tabviewinit from within the onSuccess 
          function but you cannot call it before onSuccess has been called, meaning, 
          you can leave a flag somewhere signaling that everything is loaded, or you 
          can also check YAHOO.env.modules to see if what you have asked for is 
          already there.

          Satyam

          ----- Original Message ----- 
          From: "kakar0to" <kakar0to@yahoo. com>
          To: <ydn-javascript@ yahoogroups. com>
          Sent: Monday, December 24, 2007 12:48 PM
          Subject: [ydn-javascript] YUI Loader constructor problem

          >I am using YUI 2.3.1 with the YUI Loader module.
          > So it was pretty simple to setup a config object and initiate the
          > loader which was going to load all required files from the given source.
          >
          > When YUI 2.4.0 was released i was exited about the new changes and
          > tryed to use them on my script but without any luck.
          > My current problem is the onSuccess callback funtion insie the loader.
          > It seems to insist on initiating the objects i am loading with the YUI
          > Loader. I have tryed many example scripts without any luck to get them
          > working the way they used to work.
          >
          > Here i an example i was working with.
          >
          >
          > <body class="yui-skin- sam">
          > <script type="text/javascri pt"
          > src="../build/ yuiloader/ yuiloader- beta.js"> </script>
          >
          > <div id="tabContainer" ></div>
          >
          > <script type="text/javascri pt">
          >
          > loader = new YAHOO.util.YUILoade r();
          > loader.require( "tabview" );
          > loader.base = "../build/";
          > loader.loadOptional = true;
          > loader.insert( { onSuccess: function() {
          > //YAHOO.example. tabviewinit( ); //WHEN USEING THIS CALLBACK EVERYTHING
          > IS FINE!!!
          > }});
          >
          > YAHOO.example. tabviewinit = function( ){
          > var tabView = new YAHOO.widget. TabView( { id: 'generatedTabs' } );
          >
          > tabView.addTab( new YAHOO.widget. Tab({
          > label: 'lorem',
          > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
          > active: true
          > }));
          >
          > tabView.addTab( new YAHOO.widget. Tab({
          > label: 'ipsum',
          > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
          > }));
          >
          > tabView.addTab( new YAHOO.widget. Tab({
          > label: 'dolor',
          > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
          > }));
          > tabView.appendTo( 'tabContainer' );
          > };
          >
          >
          > YAHOO.example. tabviewinit( ); //This is what i want to execute.
          >
          > </script>
          > </body>
          >
          > My goal is to load all the sources i need and then initiate the object
          > whenever it pleases me :) not relying on the OnSuccess.
          >
          > Please give me some help on this one.
          >
          >
          >
          >
          > Yahoo! Groups Links
          >
          >
          >
          >
          >
          > -- 
          > No virus found in this incoming message.
          > Checked by AVG Free Edition.
          > Version: 7.5.516 / Virus Database: 269.17.7/1194 - Release Date: 
          > 23/12/2007 17:27
          >
          > 


        • kakar0to
          I would be greatfull when you could rewrite my example the way you know it will going to work. I am still getting this YAHOO.widget.TabView is not a
          Message 4 of 8 , Dec 25, 2007
          • 0 Attachment
            I would be greatfull when you could rewrite my example the way you
            know it will going to work.

            I am still getting this 'YAHOO.widget.TabView is not a constructor' error.

            --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
            >
            > Nothing of what you ask is going to be loaded until the onSuccess
            callback
            > is called, that is the signal for you to know that everything has been
            > loaded. You don't need to call tabviewinit from within the onSuccess
            > function but you cannot call it before onSuccess has been called,
            meaning,
            > you can leave a flag somewhere signaling that everything is loaded,
            or you
            > can also check YAHOO.env.modules to see if what you have asked for is
            > already there.
            >
            > Satyam
            >
            > ----- Original Message -----
            > From: "kakar0to" <kakar0to@...>
            > To: <ydn-javascript@yahoogroups.com>
            > Sent: Monday, December 24, 2007 12:48 PM
            > Subject: [ydn-javascript] YUI Loader constructor problem
            >
            >
            > >I am using YUI 2.3.1 with the YUI Loader module.
            > > So it was pretty simple to setup a config object and initiate the
            > > loader which was going to load all required files from the given
            source.
            > >
            > > When YUI 2.4.0 was released i was exited about the new changes and
            > > tryed to use them on my script but without any luck.
            > > My current problem is the onSuccess callback funtion insie the loader.
            > > It seems to insist on initiating the objects i am loading with the YUI
            > > Loader. I have tryed many example scripts without any luck to get them
            > > working the way they used to work.
            > >
            > > Here i an example i was working with.
            > >
            > >
            > > <body class="yui-skin-sam">
            > > <script type="text/javascript"
            > > src="../build/yuiloader/yuiloader-beta.js"></script>
            > >
            > > <div id="tabContainer"></div>
            > >
            > > <script type="text/javascript">
            > >
            > > loader = new YAHOO.util.YUILoader();
            > > loader.require("tabview");
            > > loader.base = "../build/";
            > > loader.loadOptional = true;
            > > loader.insert({ onSuccess: function() {
            > > //YAHOO.example.tabviewinit(); //WHEN USEING THIS CALLBACK EVERYTHING
            > > IS FINE!!!
            > > }});
            > >
            > > YAHOO.example.tabviewinit = function( ){
            > > var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );
            > >
            > > tabView.addTab( new YAHOO.widget.Tab({
            > > label: 'lorem',
            > > content: '<p>Lorem ipsum dolor sit amet...</p>',
            > > active: true
            > > }));
            > >
            > > tabView.addTab( new YAHOO.widget.Tab({
            > > label: 'ipsum',
            > > content: '<p>Lorem ipsum dolor sit amet...</p>',
            > > }));
            > >
            > > tabView.addTab( new YAHOO.widget.Tab({
            > > label: 'dolor',
            > > content: '<p>Lorem ipsum dolor sit amet...</p>',
            > > }));
            > > tabView.appendTo('tabContainer');
            > > };
            > >
            > >
            > > YAHOO.example.tabviewinit(); //This is what i want to execute.
            > >
            > > </script>
            > > </body>
            > >
            > > My goal is to load all the sources i need and then initiate the object
            > > whenever it pleases me :) not relying on the OnSuccess.
            > >
            > > Please give me some help on this one.
            > >
            > >
            > >
            > >
            > > Yahoo! Groups Links
            > >
            > >
            > >
            > >
            > >
            > > --
            > > No virus found in this incoming message.
            > > Checked by AVG Free Edition.
            > > Version: 7.5.516 / Virus Database: 269.17.7/1194 - Release Date:
            > > 23/12/2007 17:27
            > >
            > >
            >
          • Alan Pinstein
            Here s what you have to do...
            Message 5 of 8 , Dec 25, 2007
            • 0 Attachment
              Here's what you have to do...

              <body class="yui-skin-sam">
              <script type="text/javascript"
              src="../build/yuiloader/yuiloader-beta.js"></script>

              <div id="tabContainer"></div>

              <script type="text/javascript">

              loader = new YAHOO.util.YUILoader();
              loader.require("tabview");
              loader.base = "../build/";
              loader.loadOptional = true;
              loader.insert({ onSuccess: function() {
                  // set up your functions
                  YAHOO.example.tabviewinit = function( ){
                  var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );

                  tabView.addTab( new YAHOO.widget.Tab({
                  label: 'lorem',
                  content: '<p>Lorem ipsum dolor sit amet...</p>',
                  active: true
                  }));

                  tabView.addTab( new YAHOO.widget.Tab({
                  label: 'ipsum',
                  content: '<p>Lorem ipsum dolor sit amet...</p>',
                  }));

                  tabView.addTab( new YAHOO.widget.Tab({
                  label: 'dolor',
                  content: '<p>Lorem ipsum dolor sit amet...</p>',
                  }));
                  tabView.appendTo('tabContainer');
                  };} });

              // Call doInitTabViewWhenAvailable() when you want your tabview set up. It might not run IMMEDIATELY, because the tab stuff might not be loaded yet. But it will run as early as it possibly can (within 500 ms which of course is tuneable).
              // I think that this syntax is correct; I haven't done tons with closure so you may have to explicitly pass in myTimer but I think this is correct.
              function doInitTabViewWhenAvailable() {
                  var myTimer = window.setInterval(500, function() {
                                  if (YAHOO && YAHOO.example && YAHOO.example.tabviewinit) {
                                      YAHOO.example.tabviewinit();
                                      window.clearInterval(myTimer);
                                  }
                              }); 
              }                                                              

              I am not sure why you want to delay setting up your tabview... if it were me I'd just do a:

                  YAHOO.util.Event.onDomReady(function() {
                      YAHOO.examples.tabviewinit();
                  });

              But this should work for you.

              You must understand that YUILoader make async calls, and thus introduces race conditions. So it is important to understand how this works to ensure bug-free code. AJAX has effectively brought the complex task of writing thread-safe code to all of us via async XHR, which is unfortunate because dealing with race conditions is tricky.

              Good luck...

              Alan

              On Dec 25, 2007, at 9:10 AM, kakar0to wrote:

              I would be greatfull when you could rewrite my example the way you
              know it will going to work.

              I am still getting this 'YAHOO.widget. TabView is not a constructor' error.

              --- In ydn-javascript@ yahoogroups. com, "Satyam" <satyam@...> wrote:
              >
              > Nothing of what you ask is going to be loaded until the onSuccess
              callback 
              > is called, that is the signal for you to know that everything has been 
              > loaded. You don't need to call tabviewinit from within the onSuccess 
              > function but you cannot call it before onSuccess has been called,
              meaning, 
              > you can leave a flag somewhere signaling that everything is loaded,
              or you 
              > can also check YAHOO.env.modules to see if what you have asked for is 
              > already there.
              > 
              > Satyam
              > 
              > ----- Original Message ----- 
              > From: "kakar0to" <kakar0to@.. .>
              > To: <ydn-javascript@ yahoogroups. com>
              > Sent: Monday, December 24, 2007 12:48 PM
              > Subject: [ydn-javascript] YUI Loader constructor problem
              > 
              > 
              > >I am using YUI 2.3.1 with the YUI Loader module.
              > > So it was pretty simple to setup a config object and initiate the
              > > loader which was going to load all required files from the given
              source.
              > >
              > > When YUI 2.4.0 was released i was exited about the new changes and
              > > tryed to use them on my script but without any luck.
              > > My current problem is the onSuccess callback funtion insie the loader.
              > > It seems to insist on initiating the objects i am loading with the YUI
              > > Loader. I have tryed many example scripts without any luck to get them
              > > working the way they used to work.
              > >
              > > Here i an example i was working with.
              > >
              > >
              > > <body class="yui-skin- sam">
              > > <script type="text/javascri pt"
              > > src="../build/ yuiloader/ yuiloader- beta.js"> </script>
              > >
              > > <div id="tabContainer" ></div>
              > >
              > > <script type="text/javascri pt">
              > >
              > > loader = new YAHOO.util.YUILoade r();
              > > loader.require( "tabview" );
              > > loader.base = "../build/";
              > > loader.loadOptional = true;
              > > loader.insert( { onSuccess: function() {
              > > //YAHOO.example. tabviewinit( ); //WHEN USEING THIS CALLBACK EVERYTHING
              > > IS FINE!!!
              > > }});
              > >
              > > YAHOO.example. tabviewinit = function( ){
              > > var tabView = new YAHOO.widget. TabView( { id: 'generatedTabs' } );
              > >
              > > tabView.addTab( new YAHOO.widget. Tab({
              > > label: 'lorem',
              > > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
              > > active: true
              > > }));
              > >
              > > tabView.addTab( new YAHOO.widget. Tab({
              > > label: 'ipsum',
              > > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
              > > }));
              > >
              > > tabView.addTab( new YAHOO.widget. Tab({
              > > label: 'dolor',
              > > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
              > > }));
              > > tabView.appendTo( 'tabContainer' );
              > > };
              > >
              > >
              > > YAHOO.example. tabviewinit( ); //This is what i want to execute.
              > >
              > > </script>
              > > </body>
              > >
              > > My goal is to load all the sources i need and then initiate the object
              > > whenever it pleases me :) not relying on the OnSuccess.
              > >
              > > Please give me some help on this one.
              > >
              > >
              > >
              > >
              > > Yahoo! Groups Links
              > >
              > >
              > >
              > >
              > >
              > > -- 
              > > No virus found in this incoming message.
              > > Checked by AVG Free Edition.
              > > Version: 7.5.516 / Virus Database: 269.17.7/1194 - Release Date: 
              > > 23/12/2007 17:27
              > >
              > >
              >


            • kakar0to
              Thanks alot Alan. The reason i want to initiate stuff later is the following. I am using a php and have smarty template engine embeded into it. So i have a
              Message 6 of 8 , Dec 25, 2007
              • 0 Attachment
                Thanks alot Alan.

                The reason i want to initiate stuff later is the following.
                I am using a php and have smarty template engine embeded into it.

                So i have a header template file which is constant for most of the
                scripts. This is where i tell the loader to grab the dependencies i
                know i am going to use. it is much simpler and more elegant as to
                include every file and dependency manualy.

                so later i have some pretty code where i want to user some yui
                modules. in 2.3.1 it was enough to tell the loader to get the stuff
                and use yui stuff whenever i want but now i have to take care of the
                race conditions you told me about.

                so the reason i want to make the calls outside of the onSuccess is
                because it is not certain that the call is needed.

                i hope my explanation will bring some light into dark.

                btw happy xmas to all.

                --- In ydn-javascript@yahoogroups.com, Alan Pinstein <apinstein@...>
                wrote:
                >
                > Here's what you have to do...
                >
                > <body class="yui-skin-sam">
                > <script type="text/javascript"
                > src="../build/yuiloader/yuiloader-beta.js"></script>
                >
                > <div id="tabContainer"></div>
                >
                > <script type="text/javascript">
                >
                > loader = new YAHOO.util.YUILoader();
                > loader.require("tabview");
                > loader.base = "../build/";
                > loader.loadOptional = true;
                > loader.insert({ onSuccess: function() {
                > // set up your functions
                > YAHOO.example.tabviewinit = function( ){
                > var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );
                >
                > tabView.addTab( new YAHOO.widget.Tab({
                > label: 'lorem',
                > content: '<p>Lorem ipsum dolor sit amet...</p>',
                > active: true
                > }));
                >
                > tabView.addTab( new YAHOO.widget.Tab({
                > label: 'ipsum',
                > content: '<p>Lorem ipsum dolor sit amet...</p>',
                > }));
                >
                > tabView.addTab( new YAHOO.widget.Tab({
                > label: 'dolor',
                > content: '<p>Lorem ipsum dolor sit amet...</p>',
                > }));
                > tabView.appendTo('tabContainer');
                > };} });
                >
                > // Call doInitTabViewWhenAvailable() when you want your tabview set
                > up. It might not run IMMEDIATELY, because the tab stuff might not be
                > loaded yet. But it will run as early as it possibly can (within 500
                > ms which of course is tuneable).
                > // I think that this syntax is correct; I haven't done tons with
                > closure so you may have to explicitly pass in myTimer but I think
                > this is correct.
                > function doInitTabViewWhenAvailable() {
                > var myTimer = window.setInterval(500, function() {
                > if (YAHOO && YAHOO.example &&
                > YAHOO.example.tabviewinit) {
                > YAHOO.example.tabviewinit();
                > window.clearInterval(myTimer);
                > }
                > });
                > }
                >
                > I am not sure why you want to delay setting up your tabview... if it
                > were me I'd just do a:
                >
                > YAHOO.util.Event.onDomReady(function() {
                > YAHOO.examples.tabviewinit();
                > });
                >
                > But this should work for you.
                >
                > You must understand that YUILoader make async calls, and thus
                > introduces race conditions. So it is important to understand how this
                > works to ensure bug-free code. AJAX has effectively brought the
                > complex task of writing thread-safe code to all of us via async XHR,
                > which is unfortunate because dealing with race conditions is tricky.
                >
                > Good luck...
                >
                > Alan
                >
                > On Dec 25, 2007, at 9:10 AM, kakar0to wrote:
                >
                > > I would be greatfull when you could rewrite my example the way you
                > > know it will going to work.
                > >
                > > I am still getting this 'YAHOO.widget.TabView is not a constructor'
                > > error.
                > >
                > > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@> wrote:
                > > >
                > > > Nothing of what you ask is going to be loaded until the onSuccess
                > > callback
                > > > is called, that is the signal for you to know that everything has
                > > been
                > > > loaded. You don't need to call tabviewinit from within the onSuccess
                > > > function but you cannot call it before onSuccess has been called,
                > > meaning,
                > > > you can leave a flag somewhere signaling that everything is loaded,
                > > or you
                > > > can also check YAHOO.env.modules to see if what you have asked
                > > for is
                > > > already there.
                > > >
                > > > Satyam
                > > >
                > > > ----- Original Message -----
                > > > From: "kakar0to" <kakar0to@>
                > > > To: <ydn-javascript@yahoogroups.com>
                > > > Sent: Monday, December 24, 2007 12:48 PM
                > > > Subject: [ydn-javascript] YUI Loader constructor problem
                > > >
                > > >
                > > > >I am using YUI 2.3.1 with the YUI Loader module.
                > > > > So it was pretty simple to setup a config object and initiate the
                > > > > loader which was going to load all required files from the given
                > > source.
                > > > >
                > > > > When YUI 2.4.0 was released i was exited about the new changes and
                > > > > tryed to use them on my script but without any luck.
                > > > > My current problem is the onSuccess callback funtion insie the
                > > loader.
                > > > > It seems to insist on initiating the objects i am loading with
                > > the YUI
                > > > > Loader. I have tryed many example scripts without any luck to
                > > get them
                > > > > working the way they used to work.
                > > > >
                > > > > Here i an example i was working with.
                > > > >
                > > > >
                > > > > <body class="yui-skin-sam">
                > > > > <script type="text/javascript"
                > > > > src="../build/yuiloader/yuiloader-beta.js"></script>
                > > > >
                > > > > <div id="tabContainer"></div>
                > > > >
                > > > > <script type="text/javascript">
                > > > >
                > > > > loader = new YAHOO.util.YUILoader();
                > > > > loader.require("tabview");
                > > > > loader.base = "../build/";
                > > > > loader.loadOptional = true;
                > > > > loader.insert({ onSuccess: function() {
                > > > > //YAHOO.example.tabviewinit(); //WHEN USEING THIS CALLBACK
                > > EVERYTHING
                > > > > IS FINE!!!
                > > > > }});
                > > > >
                > > > > YAHOO.example.tabviewinit = function( ){
                > > > > var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );
                > > > >
                > > > > tabView.addTab( new YAHOO.widget.Tab({
                > > > > label: 'lorem',
                > > > > content: '<p>Lorem ipsum dolor sit amet...</p>',
                > > > > active: true
                > > > > }));
                > > > >
                > > > > tabView.addTab( new YAHOO.widget.Tab({
                > > > > label: 'ipsum',
                > > > > content: '<p>Lorem ipsum dolor sit amet...</p>',
                > > > > }));
                > > > >
                > > > > tabView.addTab( new YAHOO.widget.Tab({
                > > > > label: 'dolor',
                > > > > content: '<p>Lorem ipsum dolor sit amet...</p>',
                > > > > }));
                > > > > tabView.appendTo('tabContainer');
                > > > > };
                > > > >
                > > > >
                > > > > YAHOO.example.tabviewinit(); //This is what i want to execute.
                > > > >
                > > > > </script>
                > > > > </body>
                > > > >
                > > > > My goal is to load all the sources i need and then initiate the
                > > object
                > > > > whenever it pleases me :) not relying on the OnSuccess.
                > > > >
                > > > > Please give me some help on this one.
                > > > >
                > > > >
                > > > >
                > > > >
                > > > > Yahoo! Groups Links
                > > > >
                > > > >
                > > > >
                > > > >
                > > > >
                > > > > --
                > > > > No virus found in this incoming message.
                > > > > Checked by AVG Free Edition.
                > > > > Version: 7.5.516 / Virus Database: 269.17.7/1194 - Release Date:
                > > > > 23/12/2007 17:27
                > > > >
                > > > >
                > > >
                > >
                > >
                > >
                >
              • Alan Pinstein
                I see... well, I am not sure that you understand exactly what YUILoader is for... If you re using YUILoader in a header include to load all dependencies you
                Message 7 of 8 , Dec 25, 2007
                • 0 Attachment
                  I see... well, I am not sure that you understand exactly what YUILoader is for...

                  If you're using YUILoader in a "header" include to load all dependencies you might need, it defeats a major purpose of YUILoader. 

                  YUILoader enables you to lazy-load YUI components as needed, and does dependency management for you.

                  Thus, you should have YUILoader load all possible controls you might use in your header file, or it will load everything ANYWAY and not save you any JS loading time if something isn't needed.

                  Rather, you should include only YUILoader in your header and then in your smarty page where you need the tabview, that's where you use YUILoader.
                  YUILoader will load the tabview pieces as needed and init the tab control when you call the init() method from your onsuccess handler.

                  Yes, it's a little more code to write on each page, but it will improve loading performance and keep you from having to manually mange YUI dependencies.

                  If you want only programming convenience (ie, minimal JS code in each smarty template), then you should simply include everything in your header file with <script> tags (which load synchronously) and just use init your YUI controls whenever you feel like it. It's not as efficient, but it is easier.

                  Alan

                  On Dec 25, 2007, at 11:39 AM, kakar0to wrote:

                  Thanks alot Alan.

                  The reason i want to initiate stuff later is the following.
                  I am using a php and have smarty template engine embeded into it.

                  So i have a header template file which is constant for most of the
                  scripts. This is where i tell the loader to grab the dependencies i
                  know i am going to use. it is much simpler and more elegant as to
                  include every file and dependency manualy.

                  so later i have some pretty code where i want to user some yui
                  modules. in 2.3.1 it was enough to tell the loader to get the stuff
                  and use yui stuff whenever i want but now i have to take care of the
                  race conditions you told me about.

                  so the reason i want to make the calls outside of the onSuccess is
                  because it is not certain that the call is needed.

                  i hope my explanation will bring some light into dark.

                  btw happy xmas to all.

                  --- In ydn-javascript@ yahoogroups. com, Alan Pinstein <apinstein@. ..>
                  wrote:
                  >
                  > Here's what you have to do...
                  > 
                  > <body class="yui-skin- sam">
                  > <script type="text/javascri pt"
                  > src="../build/ yuiloader/ yuiloader- beta.js"> </script>
                  > 
                  > <div id="tabContainer" ></div>
                  > 
                  > <script type="text/javascri pt">
                  > 
                  > loader = new YAHOO.util.YUILoade r();
                  > loader.require( "tabview" );
                  > loader.base = "../build/";
                  > loader.loadOptional = true;
                  > loader.insert( { onSuccess: function() {
                  > // set up your functions
                  > YAHOO.example. tabviewinit = function( ){
                  > var tabView = new YAHOO.widget. TabView( { id: 'generatedTabs' } );
                  > 
                  > tabView.addTab( new YAHOO.widget. Tab({
                  > label: 'lorem',
                  > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
                  > active: true
                  > }));
                  > 
                  > tabView.addTab( new YAHOO.widget. Tab({
                  > label: 'ipsum',
                  > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
                  > }));
                  > 
                  > tabView.addTab( new YAHOO.widget. Tab({
                  > label: 'dolor',
                  > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
                  > }));
                  > tabView.appendTo( 'tabContainer' );
                  > };} });
                  > 
                  > // Call doInitTabViewWhenAv ailable() when you want your tabview set 
                  > up. It might not run IMMEDIATELY, because the tab stuff might not be 
                  > loaded yet. But it will run as early as it possibly can (within 500 
                  > ms which of course is tuneable).
                  > // I think that this syntax is correct; I haven't done tons with 
                  > closure so you may have to explicitly pass in myTimer but I think 
                  > this is correct.
                  > function doInitTabViewWhenAv ailable() {
                  > var myTimer = window.setInterval( 500, function() {
                  > if (YAHOO && YAHOO.example && 
                  > YAHOO.example. tabviewinit) {
                  > YAHOO.example. tabviewinit( );
                  > window.clearInterva l(myTimer) ;
                  > }
                  > });
                  > }
                  > 
                  > I am not sure why you want to delay setting up your tabview... if it 
                  > were me I'd just do a:
                  > 
                  > YAHOO.util.Event. onDomReady( function( ) {
                  > YAHOO.examples. tabviewinit( );
                  > });
                  > 
                  > But this should work for you.
                  > 
                  > You must understand that YUILoader make async calls, and thus 
                  > introduces race conditions. So it is important to understand how this 
                  > works to ensure bug-free code. AJAX has effectively brought the 
                  > complex task of writing thread-safe code to all of us via async XHR, 
                  > which is unfortunate because dealing with race conditions is tricky.
                  > 
                  > Good luck...
                  > 
                  > Alan
                  > 
                  > On Dec 25, 2007, at 9:10 AM, kakar0to wrote:
                  > 
                  > > I would be greatfull when you could rewrite my example the way you
                  > > know it will going to work.
                  > >
                  > > I am still getting this 'YAHOO.widget. TabView is not a constructor' 
                  > > error.
                  > >
                  > > --- In ydn-javascript@ yahoogroups. com, "Satyam" <satyam@> wrote:
                  > > >
                  > > > Nothing of what you ask is going to be loaded until the onSuccess
                  > > callback
                  > > > is called, that is the signal for you to know that everything has 
                  > > been
                  > > > loaded. You don't need to call tabviewinit from within the onSuccess
                  > > > function but you cannot call it before onSuccess has been called,
                  > > meaning,
                  > > > you can leave a flag somewhere signaling that everything is loaded,
                  > > or you
                  > > > can also check YAHOO.env.modules to see if what you have asked 
                  > > for is
                  > > > already there.
                  > > >
                  > > > Satyam
                  > > >
                  > > > ----- Original Message -----
                  > > > From: "kakar0to" <kakar0to@>
                  > > > To: <ydn-javascript@ yahoogroups. com>
                  > > > Sent: Monday, December 24, 2007 12:48 PM
                  > > > Subject: [ydn-javascript] YUI Loader constructor problem
                  > > >
                  > > >
                  > > > >I am using YUI 2.3.1 with the YUI Loader module.
                  > > > > So it was pretty simple to setup a config object and initiate the
                  > > > > loader which was going to load all required files from the given
                  > > source.
                  > > > >
                  > > > > When YUI 2.4.0 was released i was exited about the new changes and
                  > > > > tryed to use them on my script but without any luck.
                  > > > > My current problem is the onSuccess callback funtion insie the 
                  > > loader.
                  > > > > It seems to insist on initiating the objects i am loading with 
                  > > the YUI
                  > > > > Loader. I have tryed many example scripts without any luck to 
                  > > get them
                  > > > > working the way they used to work.
                  > > > >
                  > > > > Here i an example i was working with.
                  > > > >
                  > > > >
                  > > > > <body class="yui-skin- sam">
                  > > > > <script type="text/javascri pt"
                  > > > > src="../build/ yuiloader/ yuiloader- beta.js"> </script>
                  > > > >
                  > > > > <div id="tabContainer" ></div>
                  > > > >
                  > > > > <script type="text/javascri pt">
                  > > > >
                  > > > > loader = new YAHOO.util.YUILoade r();
                  > > > > loader.require( "tabview" );
                  > > > > loader.base = "../build/";
                  > > > > loader.loadOptional = true;
                  > > > > loader.insert( { onSuccess: function() {
                  > > > > //YAHOO.example. tabviewinit( ); //WHEN USEING THIS CALLBACK 
                  > > EVERYTHING
                  > > > > IS FINE!!!
                  > > > > }});
                  > > > >
                  > > > > YAHOO.example. tabviewinit = function( ){
                  > > > > var tabView = new YAHOO.widget. TabView( { id: 'generatedTabs' } );
                  > > > >
                  > > > > tabView.addTab( new YAHOO.widget. Tab({
                  > > > > label: 'lorem',
                  > > > > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
                  > > > > active: true
                  > > > > }));
                  > > > >
                  > > > > tabView.addTab( new YAHOO.widget. Tab({
                  > > > > label: 'ipsum',
                  > > > > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
                  > > > > }));
                  > > > >
                  > > > > tabView.addTab( new YAHOO.widget. Tab({
                  > > > > label: 'dolor',
                  > > > > content: '<p>Lorem ipsum dolor sit amet...</p>' ,
                  > > > > }));
                  > > > > tabView.appendTo( 'tabContainer' );
                  > > > > };
                  > > > >
                  > > > >
                  > > > > YAHOO.example. tabviewinit( ); //This is what i want to execute.
                  > > > >
                  > > > > </script>
                  > > > > </body>
                  > > > >
                  > > > > My goal is to load all the sources i need and then initiate the 
                  > > object
                  > > > > whenever it pleases me :) not relying on the OnSuccess.
                  > > > >
                  > > > > Please give me some help on this one.
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > > Yahoo! Groups Links
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > >
                  > > > > --
                  > > > > No virus found in this incoming message.
                  > > > > Checked by AVG Free Edition.
                  > > > > Version: 7.5.516 / Virus Database: 269.17.7/1194 - Release Date:
                  > > > > 23/12/2007 17:27
                  > > > >
                  > > > >
                  > > >
                  > >
                  > >
                  > >
                  >


                • mikeni1225
                  ... this can t be the best solution...
                  Message 8 of 8 , Jan 4, 2008
                  • 0 Attachment
                    --- In ydn-javascript@yahoogroups.com, Alan Pinstein <apinstein@...>
                    wrote:
                    >
                    > Here's what you have to do...
                    >
                    > <body class="yui-skin-sam">
                    > <script type="text/javascript"
                    > src="../build/yuiloader/yuiloader-beta.js"></script>
                    >
                    > <div id="tabContainer"></div>
                    >
                    > <script type="text/javascript">
                    >
                    > loader = new YAHOO.util.YUILoader();
                    > loader.require("tabview");
                    > loader.base = "../build/";
                    > loader.loadOptional = true;
                    > loader.insert({ onSuccess: function() {
                    > // set up your functions
                    > YAHOO.example.tabviewinit = function( ){
                    > var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );
                    >
                    > tabView.addTab( new YAHOO.widget.Tab({
                    > label: 'lorem',
                    > content: '<p>Lorem ipsum dolor sit amet...</p>',
                    > active: true
                    > }));
                    >
                    > tabView.addTab( new YAHOO.widget.Tab({
                    > label: 'ipsum',
                    > content: '<p>Lorem ipsum dolor sit amet...</p>',
                    > }));
                    >
                    > tabView.addTab( new YAHOO.widget.Tab({
                    > label: 'dolor',
                    > content: '<p>Lorem ipsum dolor sit amet...</p>',
                    > }));
                    > tabView.appendTo('tabContainer');
                    > };} });
                    >
                    > // Call doInitTabViewWhenAvailable() when you want your tabview set
                    > up. It might not run IMMEDIATELY, because the tab stuff might not be
                    > loaded yet. But it will run as early as it possibly can (within 500
                    > ms which of course is tuneable).
                    > // I think that this syntax is correct; I haven't done tons with
                    > closure so you may have to explicitly pass in myTimer but I think
                    > this is correct.
                    > function doInitTabViewWhenAvailable() {
                    > var myTimer = window.setInterval(500, function() {
                    > if (YAHOO && YAHOO.example &&
                    > YAHOO.example.tabviewinit) {
                    > YAHOO.example.tabviewinit();
                    > window.clearInterval(myTimer);
                    > }
                    > });
                    > }
                    >
                    > I am not sure why you want to delay setting up your tabview... if it
                    > were me I'd just do a:
                    >
                    > YAHOO.util.Event.onDomReady(function() {
                    > YAHOO.examples.tabviewinit();
                    > });
                    >
                    > But this should work for you.
                    >
                    > You must understand that YUILoader make async calls, and thus
                    > introduces race conditions. So it is important to understand how this
                    > works to ensure bug-free code. AJAX has effectively brought the
                    > complex task of writing thread-safe code to all of us via async XHR,
                    > which is unfortunate because dealing with race conditions is tricky.
                    >
                    > Good luck...
                    >
                    > Alan
                    >
                    > On Dec 25, 2007, at 9:10 AM, kakar0to wrote:
                    >
                    > > I would be greatfull when you could rewrite my example the way you
                    > > know it will going to work.
                    > >
                    > > I am still getting this 'YAHOO.widget.TabView is not a constructor'
                    > > error.
                    > >
                    > > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@> wrote:
                    > > >
                    > > > Nothing of what you ask is going to be loaded until the onSuccess
                    > > callback
                    > > > is called, that is the signal for you to know that everything has
                    > > been
                    > > > loaded. You don't need to call tabviewinit from within the onSuccess
                    > > > function but you cannot call it before onSuccess has been called,
                    > > meaning,
                    > > > you can leave a flag somewhere signaling that everything is loaded,
                    > > or you
                    > > > can also check YAHOO.env.modules to see if what you have asked
                    > > for is
                    > > > already there.
                    > > >
                    > > > Satyam
                    > > >
                    > > > ----- Original Message -----
                    > > > From: "kakar0to" <kakar0to@>
                    > > > To: <ydn-javascript@yahoogroups.com>
                    > > > Sent: Monday, December 24, 2007 12:48 PM
                    > > > Subject: [ydn-javascript] YUI Loader constructor problem
                    > > >
                    > > >
                    > > > >I am using YUI 2.3.1 with the YUI Loader module.
                    > > > > So it was pretty simple to setup a config object and initiate the
                    > > > > loader which was going to load all required files from the given
                    > > source.
                    > > > >
                    > > > > When YUI 2.4.0 was released i was exited about the new changes and
                    > > > > tryed to use them on my script but without any luck.
                    > > > > My current problem is the onSuccess callback funtion insie the
                    > > loader.
                    > > > > It seems to insist on initiating the objects i am loading with
                    > > the YUI
                    > > > > Loader. I have tryed many example scripts without any luck to
                    > > get them
                    > > > > working the way they used to work.
                    > > > >
                    > > > > Here i an example i was working with.
                    > > > >
                    > > > >
                    > > > > <body class="yui-skin-sam">
                    > > > > <script type="text/javascript"
                    > > > > src="../build/yuiloader/yuiloader-beta.js"></script>
                    > > > >
                    > > > > <div id="tabContainer"></div>
                    > > > >
                    > > > > <script type="text/javascript">
                    > > > >
                    > > > > loader = new YAHOO.util.YUILoader();
                    > > > > loader.require("tabview");
                    > > > > loader.base = "../build/";
                    > > > > loader.loadOptional = true;
                    > > > > loader.insert({ onSuccess: function() {
                    > > > > //YAHOO.example.tabviewinit(); //WHEN USEING THIS CALLBACK
                    > > EVERYTHING
                    > > > > IS FINE!!!
                    > > > > }});
                    > > > >
                    > > > > YAHOO.example.tabviewinit = function( ){
                    > > > > var tabView = new YAHOO.widget.TabView( { id: 'generatedTabs' } );
                    > > > >
                    > > > > tabView.addTab( new YAHOO.widget.Tab({
                    > > > > label: 'lorem',
                    > > > > content: '<p>Lorem ipsum dolor sit amet...</p>',
                    > > > > active: true
                    > > > > }));
                    > > > >
                    > > > > tabView.addTab( new YAHOO.widget.Tab({
                    > > > > label: 'ipsum',
                    > > > > content: '<p>Lorem ipsum dolor sit amet...</p>',
                    > > > > }));
                    > > > >
                    > > > > tabView.addTab( new YAHOO.widget.Tab({
                    > > > > label: 'dolor',
                    > > > > content: '<p>Lorem ipsum dolor sit amet...</p>',
                    > > > > }));
                    > > > > tabView.appendTo('tabContainer');
                    > > > > };
                    > > > >
                    > > > >
                    > > > > YAHOO.example.tabviewinit(); //This is what i want to execute.
                    > > > >
                    > > > > </script>
                    > > > > </body>
                    > > > >
                    > > > > My goal is to load all the sources i need and then initiate the
                    > > object
                    > > > > whenever it pleases me :) not relying on the OnSuccess.
                    > > > >
                    > > > > Please give me some help on this one.
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > > Yahoo! Groups Links
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > >
                    > > > > --
                    > > > > No virus found in this incoming message.
                    > > > > Checked by AVG Free Edition.
                    > > > > Version: 7.5.516 / Virus Database: 269.17.7/1194 - Release Date:
                    > > > > 23/12/2007 17:27
                    > > > >
                    > > > >
                    > > >
                    > >
                    > >
                    > >
                    >

                    this can't be the best solution...
                  Your message has been successfully submitted and would be delivered to recipients shortly.