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"/>  


AllThingsFusion said…
This is a simple but handy tip. Thank you.
Vinitha said…

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
Anonymous said…

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.
Shrinidhi Achar said…
This comment has been removed by the author.
Shrinidhi Achar said…
Hi Jobinesh,

I had a doubt in such a parent-child popup design. I have a parent popup, with autoCancel enabled, which has a few buttons, some of which just have action listeners that update the backend and some of them launch a child popup. On Finishing with the child popup, I want to come back to the parent popup without closing it. I could see that on clicking any button, the parent popup was cancelling automatically. So I added partialSubmit to be true on all buttons. The buttons without child popup behavior started working as expected without closing the parent popup. But the buttons that launch a child popup still cancel the parent popup on clicking OK button [Custom OK and Cancel buttons with partialSubmit enabled]. Both OK and Cancel buttons have the same actionListener which ultimately hides the child popup. While click on cancel button is keeping the parent popup shown, click on ok button, which does some backend updation, automatically cancels the parent popup on hide of child popup. Do you have any idea on how to avoid this?



The views expressed on this blog are my own and do not necessarily reflect the views of my employer.