Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-13118

Combination of tabPanel and accordion results in Javascript error

    Details

    • Steps to Reproduce:
      Hide

      When the page is loaded (first tab is active), click on the link inside of accordion.
      With Mojarra: js-error is displyed in console (TypeError: parentPanel is undefined; Source: http://localhost:9080/jsf2/javax.faces.resource/accordionItem.js.jsf?ln=org.richfaces Line: 97), nothing is working anymore.
      With MyFaces: no errors in console, strange behaviour of some components (i.e. popupPanel).

      If the page is refreshed(F5 staying on 2nd tab) everything is working again.
      If the page is refreshed staying on 1st tab, the bug can be reproduced again.

      Show
      When the page is loaded (first tab is active), click on the link inside of accordion. With Mojarra: js-error is displyed in console (TypeError: parentPanel is undefined; Source: http://localhost:9080/jsf2/javax.faces.resource/accordionItem.js.jsf?ln=org.richfaces Line: 97), nothing is working anymore. With MyFaces: no errors in console, strange behaviour of some components (i.e. popupPanel). If the page is refreshed(F5 staying on 2nd tab) everything is working again. If the page is refreshed staying on 1st tab, the bug can be reproduced again.
    • Workaround:
      Workaround Exists
    • Workaround Description:
      Hide

      Modify accordionItem.js (function __fitToHeight):

      __fitToHeight : function (parentPanel) {
         if (!parentPanel) return; //<- NEW: check if parentPanel is defined
         var h = parentPanel.getInnerHeight();
         .............
      
      Show
      Modify accordionItem.js (function __fitToHeight): __fitToHeight : function (parentPanel) { if (!parentPanel) return ; //<- NEW: check if parentPanel is defined var h = parentPanel.getInnerHeight(); .............

      Description

      Test code:

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
        xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j"
        xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
      <h:head>
        <!-- <h:outputScript name="accordionItem.js" library="org.richfaces" /> -->
      </h:head>
      <h:body>
        <c:if test="#{testBean.activeItem==null}">
          <c:set target="#{testBean}" property="activeItem" value="tab1" />
        </c:if>
        
        <h:form id="form" prependId="false">
          <h:panelGroup id="pg">
            <rich:tabPanel activeItem="#{testBean.activeItem}" id="tabPanel">
              <rich:tab header="tab1" name="tab1" render="tabPanel">
                <rich:accordion switchType="client">
                  <rich:accordionItem header="Item1">
                    <a4j:commandLink value="show tab2" action="#{testBean.put('activeItem','tab2')}" render="pg" execute="@this"/>
                  </rich:accordionItem>
                  <rich:accordionItem header="Item2">
                    <a4j:commandLink value="show tab2" action="#{testBean.put('activeItem','tab2')}" render="pg" execute="@this"/>
                  </rich:accordionItem>
                </rich:accordion>
              </rich:tab>
              <rich:tab header="tab2" name="tab2">
                <a4j:commandLink value="back" action="#{testBean.put('activeItem','tab1')}" render="pg" execute="@this"/>
              </rich:tab>
            </rich:tabPanel>
          </h:panelGroup>
        </h:form>
        
      </h:body>
      </html>
      

      where testBean is a simple HashMap with session scope.

      So, the page contains a tab-panel with two tabs.

      First tab contains an accordion with some items. The accordion items have some menu-links inside. Click on one of this links causes second tab to be selected.

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                alsha Alexey Shakov
              • Votes:
                0 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: