12 Replies Latest reply on Aug 5, 2013 8:36 AM by alsha

    RF4: rich:accordion with switchType="client" prevents popupPanel to be opened

    alsha
    alsha Aug 2, 2013 7:43 AM

      Hi,

       

      I have relative complicated use case, which I tried to reduce to the following 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:head>
<h:body>
  <c:if test="#{testBean.activeItem==null}">
    <c:set target="#{testBean}" property="activeItem" value="tab1" />
  </c:if>

  <a4j:log hotkey="M" mode="popup" />

  <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" rendered="#{testBean.activeItem=='tab2'}">
          <a4j:commandLink value="open popup" action="#{testBean.put('popup',true)}" render="popup" execute="@this"/>
        </rich:tab>
      </rich:tabPanel>
    </h:panelGroup>

    <h:panelGroup id="popup">
      <rich:popupPanel show="true" rendered="#{testBean.popup}" domElementAttachment="parent">
        <a4j:commandLink value="close popup" action="#{testBean.put('popup',false)}" render="popup" execute="@this"/>
      </rich:popupPanel>
    </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 (second tab is initially hidden).

      First tab contains an accordion with some items (important: switchType is client). The accordion items have some menu-links inside. Click on one of this links causes second tab to be shown and selected.

      This second tab contains a link; click on this link opens a popup-panel.

      The problem is, that after navigating to second tab the “open popup” - link does not work. To make it work, the complete page must be reloaded (F5).

      The code works also, if

      1. accordion component is completely removed from the page (only “show tab2”-links are left on tab1), or

      2. popupPanel is opened using Javascript-Api (#{rich:component(..)}.open())

       

      Unfortunately, according to business requirements, I am bound to exactly this configuration. The workarounds 1,2 are not acceptable.

       

      Can someone help me? Should i open an issue?

       

      P.S.

      By the way, the same code works with RF 3.3.x...

       

      1. Example code is changed: initialization of testBean.activeItem is added. 2. accordion's switchType="ajax" does not solve the problem

       

      Working code (without tabPanel):

       

       

      <?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:head>
<h:body>
  <c:if test="#{testBean.activeItem==null}">
    <c:set target="#{testBean}" property="activeItem" value="tab1" />
  </c:if>
  <a4j:log hotkey="M" mode="popup" />
  <h:form id="form" prependId="false">
    <h:panelGroup id="pg">
      <h:panelGroup rendered="#{testBean.activeItem=='tab1'}">
        <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>
      </h:panelGroup>

      <h:panelGrid rendered="#{testBean.activeItem=='tab2'}" columns="1">
        <a4j:commandLink value="open popup" action="#{testBean.put('popup',true)}" render="popup" execute="@this" />
        <a4j:commandLink value="go back to accordion" action="#{testBean.put('activeItem','tab1')}" render="pg" execute="@this" />
      </h:panelGrid>
    </h:panelGroup>

    <h:panelGroup id="popup">
      <rich:popupPanel show="true" rendered="#{testBean.popup}" domElementAttachment="parent">
        <a4j:commandLink value="close popup" action="#{testBean.put('popup',false)}" render="popup" execute="@this" />
      </rich:popupPanel>
    </h:panelGroup>

  </h:form>
</h:body>
</html>

       

      So, there is a kind of interference between tabPanel,accordion and popupPanel which sometimes prevents popup to be opened.

      • 1621 Views
      • Tags: