1 Reply Latest reply on Aug 31, 2010 6:30 AM by vestnik

    Save/restore currently openerd tab of rich:tabPanel in location.hash

    vestnik

      Hello

       

      I have a lot of rich:tabPanel with switchType="ajax" in my application and suddenly I get a requirement to be able to restore previously opened tab when user click back button in browser. After googling and experimenting I came to the following solution:

       

      {code:xml}

      <my:initialTabLoader value="#{SomeBean.someField}" reRender="formWithTabPanel"/>
      <h:form id="formWithTabPanel">
      <rich:tabPanel ... selectedTab="#{SomeBean.someField}" ...>
         ...
         <rich:column ... oncomplete="location.hash='#{SomeBean.someField}'" ...>
         </rich:column>
         ...
      </rich:tabPanel>
      </h:form>

      {code}

       

      where my:initialTabLoader is composition component with the following code:

       

      {code:xml}

      <a4j:form>

         <a4j:jsFunction name="switchTab" reRender="#{reRender}">

            <a4j:actionparam name="tab" assignTo="#{value}"/>

         </a4j:jsFunction>

       

      <script language="javascript">//<![CDATA[

      function goToHash() {

          var hashTab = location.hash.substr(1);

          if (hashTab != '#{value}' && hashTab.length != 0) {

              switchTab(hashTab);

          }

      }

       

      document.observe("dom:loaded", function() {

          // When window is loaded something is not yet initialized so I need to add delay. This delay is

          // not really reliable but it seems to work.

          setTimeout('goToHash()',300);

      });

      //]]></script>

       

      </a4j:form>

      {code}

      Everything works but I really don't like this experimentally found timeout before I can switch tab using a4j:jsFunction. Are there any javascript event which I can listen and be shure that when it's triggered I can swith tab in this way?