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

tabview issue

Expand Messages
  • kica52002
    Didnt know if anyone else has experienced this issue or not, but I have two pages (page A and page B). Both pages contain a button with a listener [code] //
    Message 1 of 2 , May 30 8:12 AM
    • 0 Attachment
      Didnt know if anyone else has experienced this issue or not, but I
      have two pages (page A and page B). Both pages contain a button with
      a listener
      [code]
      // both in page A and page B
      YAHOO.util.Event.addListener('legendBtn', 'click', function(){
      Effect.toggle('legend', 'slide', { duration: .3 });
      });
      [/code]

      I also have a third page that contains tabs. I try and include page A
      and page B with the following code
      [code]
      <script>
      var tabView = new YAHOO.widget.TabView();

      tabView.addTab( new YAHOO.widget.Tab({
      label: 'Page Viewer',
      dataSrc: 'pageA.jsp',
      cacheData: false,
      active: true
      }));

      tabView.addTab( new YAHOO.widget.Tab({
      label: 'Page Viewer',
      dataSrc: 'pageB.jsp',
      cacheData: false,
      active: true
      }));


      tabView.appendTo('yui-content');
      </script>

      <div id="yui-content"></div
      [/code]

      However, when the pages render within the tabs, the event listeners
      never get registered and I can not click on the buttons and have them
      do their actions. This can be fixed when I put them in an iframe
      however an iframe takes a long time to load.

      Any suggestions??

      Thanks
    • Caridy Patino
      Hello, When you use the tabview with dataSrc, the YUI Tabview control will load the content of the tabs using the YUI Connection Manager, and it will put the
      Message 2 of 2 , Jun 2, 2008
      • 0 Attachment
        Hello,

        When you use the tabview with dataSrc, the YUI Tabview control will
        load the content of the tabs using the YUI Connection Manager, and it
        will put the response within the tab using innerHTML. The script tags
        in the new content (innerHTML) will be striped out for security
        reason, that's why your listeners didn't works.

        There is a couple of solutions out there to solve this issue, I will
        recommend you to use the YUI Dispatcher plugin:

        Steps:
        1. Include the dispatcher plugin:
        2. Encapsulate the tabs inclusion:

        Instead to use this:

        tabView.addTab( new YAHOO.widget.Tab({
        label: 'Page Viewer',
        dataSrc: 'pageA.jsp',
        cacheData: false,
        active: true
        }));

        you need to use this:

        YAHOO.plugin.Dispatcher.delegate (new YAHOO.widget.Tab({
        label: 'Page Viewer',
        dataSrc: 'pageA.jsp',
        cacheData: false,
        active: true
        }), tabView);

        There is a bunch of examples here:
        http://bubbling-library.com/eng/api/docs/plugins/dispatcher-examples.html

        PD: the other possible solution here is to use the bubble up technique
        to avoid the addListener, defining the behavior at the highest level,
        the bubbling extension support this kind of definition too.

        Best Regards,
        Caridy Patino (caridy at yahoo-inc.com)

        --- In ydn-javascript@yahoogroups.com, "kica52002" <dean.ericson@...>
        wrote:
        >
        > Didnt know if anyone else has experienced this issue or not, but I
        > have two pages (page A and page B). Both pages contain a button with
        > a listener
        > [code]
        > // both in page A and page B
        > YAHOO.util.Event.addListener('legendBtn', 'click', function(){
        > Effect.toggle('legend', 'slide', { duration: .3 });
        > });
        > [/code]
        >
        > I also have a third page that contains tabs. I try and include page A
        > and page B with the following code
        > [code]
        > <script>
        > var tabView = new YAHOO.widget.TabView();
        >
        > tabView.addTab( new YAHOO.widget.Tab({
        > label: 'Page Viewer',
        > dataSrc: 'pageA.jsp',
        > cacheData: false,
        > active: true
        > }));
        >
        > tabView.addTab( new YAHOO.widget.Tab({
        > label: 'Page Viewer',
        > dataSrc: 'pageB.jsp',
        > cacheData: false,
        > active: true
        > }));
        >
        >
        > tabView.appendTo('yui-content');
        > </script>
        >
        > <div id="yui-content"></div
        > [/code]
        >
        > However, when the pages render within the tabs, the event listeners
        > never get registered and I can not click on the buttons and have them
        > do their actions. This can be fixed when I put them in an iframe
        > however an iframe takes a long time to load.
        >
        > Any suggestions??
        >
        > Thanks
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.