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

How to recreate a tabView without reloading page?

Expand Messages
  • johnnychaos
    I have a tabView and I ve created a button to create new content to get added to a new tab. I ve implemented some ajax which will replace the entire HTML in
    Message 1 of 4 , Jun 20, 2008
    • 0 Attachment
      I have a tabView and I've created a button to create new content to
      get added to a new tab. I've implemented some ajax which will replace
      the entire HTML in the div where the tabs live to include the new
      tabview.

      However, the tabView doesn't really put all of the contents onto the
      tabs as it should, instead all tabs show up in the page - I think this
      is because the the YUI tabView was already created and updating the
      HTML isn't going to change it.

      So, I think I need to be able re-render the tabView once I update the
      HTML where the tabView is defined. How can I do this?

      Is there a way to either re-render or destroy then create again as new
      the entire TabView?

      Thanks,

      John
    • johnnychaos
      Is re-rendering the same tabView with new definition possible?
      Message 2 of 4 , Jun 21, 2008
      • 0 Attachment
        Is re-rendering the same tabView with new definition possible?


        --- In ydn-javascript@yahoogroups.com, "johnnychaos" <john_pataki@...>
        wrote:
        >
        > I have a tabView and I've created a button to create new content to
        > get added to a new tab. I've implemented some ajax which will replace
        > the entire HTML in the div where the tabs live to include the new
        > tabview.
        >
        > However, the tabView doesn't really put all of the contents onto the
        > tabs as it should, instead all tabs show up in the page - I think this
        > is because the the YUI tabView was already created and updating the
        > HTML isn't going to change it.
        >
        > So, I think I need to be able re-render the tabView once I update the
        > HTML where the tabView is defined. How can I do this?
        >
        > Is there a way to either re-render or destroy then create again as new
        > the entire TabView?
        >
        > Thanks,
        >
        > John
        >
      • Brian McCullough
        ... I have done something very similar. I have a named DIV inside each of my Tabs, and I use my Ajax, using InnerHTML, to replace the contents of the Tab.
        Message 3 of 4 , Jun 21, 2008
        • 0 Attachment
          On Fri, Jun 20, 2008 at 10:29:46PM -0000, johnnychaos wrote:
          > I have a tabView and I've created a button to create new content to
          > get added to a new tab. I've implemented some ajax which will replace
          > the entire HTML in the div where the tabs live to include the new
          > tabview.

          I have done something very similar. I have a named DIV inside each of
          my Tabs, and I use my Ajax, using InnerHTML, to replace the contents of
          the Tab. This works well so far. My DIV is enclosed within everything
          that YUI requires.


          > However, the tabView doesn't really put all of the contents onto the
          > tabs as it should, instead all tabs show up in the page - I think this
          > is because the the YUI tabView was already created and updating the
          > HTML isn't going to change it.

          The Tabview only shows one of the tabs at a time, but they all have to
          exist in the browser at run time. The CSS shows and hides individual
          content on demand.


          My question for the group has to do with other YUI components contained
          within a Tab. I am able to change and re-render any contents that is
          "plain HTML," but things like Containers ( and the buttons that open
          them ), don't work after I re-render the contents of the Div within the
          Tab. How much of the code related to the Container ( Overlay ) do I
          need to re-execute. Just the addListener ( possibly preceeded by a
          removeListener ), or do I need to do more?



          Thank you,
          Brian
        • Eric Miraglia
          ... Brian, Generally, the only special handling you need to do is to defer instantiating a component on a Tab until the Tab is shown for the first time.
          Message 4 of 4 , Jul 1, 2008
          • 0 Attachment
            On Jun 21, 2008, at 8:09 PM, Brian McCullough wrote:

            My question for the group has to do with other YUI components contained
            within a Tab. I am able to change and re-render any contents that is
            "plain HTML," but things like Containers ( and the buttons that open
            them ), don't work after I re-render the contents of the Div within the
            Tab. How much of the code related to the Container ( Overlay ) do I
            need to re-execute. Just the addListener ( possibly preceeded by a
            removeListener ), or do I need to do more?

            Brian,

            Generally, the only special handling you need to do is to defer instantiating a component on a Tab until the Tab is shown for the first time.  Because Tab content is set to display:none when hidden, instantiation of components like Buttons or Containers can be problematic if they are targeting content on a hidden Tab.

            One component that is more complex is the the Charts Control, which currently has problems being shown and hidden.  For Charts, a more complex workaround (here) is needed.

            Regards,
            Eric
          Your message has been successfully submitted and would be delivered to recipients shortly.