Cascading af:popup windows

This time I'm back with a very simple tip on af:popup. The use case requirement was to display popup on another popup and the developers do not want to add an af:dialog or af:panelWindow to the parent popup as it does not gives the look and feel that they are looking for.

So the solution is to define the child popup inside the parent as nested. This makes sure that parent is displayed when child is made visible. What if one keep child outside of parent? Well,  if the child is kept outside of parent (note that parent popup, here, does not have af:dialog or af:panelWindow for holding its  contents) in JSF page, parent was getting closed while child is displayed. So the code snippet that worked for them look like as given below:

 <!-- Parent popup-->  
 <af:popup id="p1" autoCancel="disabled" contentDelivery="lazyUncached">  
      <af:outputText id="ot1" value="test value">  
           <af:showPopupBehavior popupId="shortDescPopup" align="endAfter" triggerType="mouseHover"/>  
      <!-- Child popup-->  
      <af:popup id="shortDescPopup" contentDelivery="immediate">  
           <af:outputText id="desc" value="This is from child popup"/>  
 <af:commandButton text="Shop Parent Popup" id="cb1">  
      <af:showPopupBehavior align="endAfter" popupId="p1"/>  


  1. This is a simple but handy tip. Thank you.

  2. Hi,

    As am a learner, it would be helpful if a sample on the same is enclosed. If this is not advisable can you kindly mail a sample on the same to my id .

    Vinitha G

  3. Hi

    I have a special case here, where a popup which opens up when I click a button on a detached table is hidden behind the detached table. Can you suggest me how to make the popup appear on top of the detached table.


Post a Comment