-
1. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
michpetrov Feb 26, 2013 7:19 AM (in response to crimson)Hi,
just from a design standpoint - why do you need multiple popups displayed at the same time?
As to your issue
<rich:popupPanel id="first" header="First" modal="true"> First panel <a4j:commandButton onclick="#{rich:component('second')}.show()" value="Open 2nd"/> <a4j:commandButton onclick="#{rich:component('first')}.hide()" value="Close 1st"/> </rich:popupPanel> <rich:popupPanel id="second" header="Second" modal="true"> Second panel <a4j:commandButton onclick="#{rich:component('first')}.show()" value="Open 1st"/> <a4j:commandButton onclick="#{rich:component('second')}.hide()" value="Close 2nd"/> </rich:popupPanel> <a4j:commandButton onclick="#{rich:component('first')}.show()" value="Open 1st"/> <a4j:commandButton onclick="#{rich:component('second')}.show()" value="Open 2nd"/>
This works for me, the last opened popupPanel will be the active one and will be above the other one. How are you opening your panels?
-
2. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
crimson Feb 26, 2013 1:59 PM (in response to michpetrov)Hi Michal,
> just from a design standpoint - why do you need multiple popups displayed at the same time?
I have a view, where I display a table of entities.
Selecting one of the brings up a modal popup panel which contains a detailed view to edit the entity.
In case this entity contains subentities I want to edit a click on such a subentity brings up another popup.
Regarding your second part:
> This works for me, the last opened popupPanel will be the active one and will be above the other one. How are you opening your panels?
I try to investigate further and then will report back here.
However, I am opening the popups using javascript as in your example.
Manuel
-
3. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
crimson Feb 26, 2013 3:42 PM (in response to crimson)Hi Michal,
me again
Now some input for you to reproduce the error:
First xhtml file (richtest.xhtml) contains first popupPanel:
{code:xml}
<h:body>
<f:view>
<ui:include src="richtest2.xhtml"/>
<h:form>
<rich:popupPanel id="first" header="First" modal="true">
First panel
<a4j:commandButton render="second" oncomplete="#{rich:component('second')}.show()" value="Open 2nd"/>
<a4j:commandButton onclick="#{rich:component('first')}.hide()" value="Close 1st"/>
</rich:popupPanel><a4j:commandButton render="first" oncomplete="#{rich:component('first')}.show()" value="Open 1st"/>
<a4j:commandButton render="second" oncomplete="#{rich:component('second')}.show()" value="Open 2nd"/>
</h:form>
</f:view>
</h:body>
{code}Second xhtml file (richtest2.xhtml) contains second popupPanel, which is included in first xhtml via <ui:include>
{code:xml}
<ui:composition>
<h:form>
<rich:popupPanel id="second" header="Second" modal="true" domElementAttachment="form">
Second panel
<a4j:commandButton render="first" oncomplete="#{rich:component('first')}.show()" value="Open 1st"/>
<a4j:commandButton onclick="#{rich:component('second')}.hide()" value="Close 2nd"/>
</rich:popupPanel>
</h:form>
</ui:composition>
{code}
Here you see exactly my problem. Opening first Panel -> OK. Then from opened fisrt Panel open second panel and this is open BELOW first panel.
I attached the two complete files.
Maybe this has something to do with either "render" attributes, which I added as its a normal use case for me to "rerender" popups before opening or it has to do with the fact that I use different h:form for the panels?
Bye Manuel
-
richtest2.xhtml.zip 546 bytes
-
richtest.xhtml.zip 666 bytes
-
-
4. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
michpetrov Feb 27, 2013 5:30 AM (in response to crimson)Hi,
or it has to do with the fact that I use different h:form for the panels?
this is the problem, kind of.
You're using domElementAttachment="form" on the second panel, but the first panel has no attachment and by default it attaches itself to <body> which is above the <form>. So the first panel is always above the second. (And you cannot attach it to the form because it doesn't "see" it.)
If you remove the domElementAttachment attribute it will work, you can also put everything inside a single form but both those panels have to be attached to the same thing.
You can also do something like this:
<rich:popupPanel id="second" header="Second" modal="true" onshow="#{rich:component('first')}.hide()" onhide="#{rich:component('first')}.show()">
it will hide the first panel when the second pops up and open it when it closes. That way you will only have one popup open at a time.
-
5. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
crimson Feb 28, 2013 5:10 PM (in response to michpetrov)Hi Michal,
thank you for your explanation and time you spent!
I think I got it
The reason I started to use domElementAttachment="form" for my popupPanels was the known bug/problem of JSF, when rerendering a form from the context of another form ...
And since I need always to rerender my popups before showing them, I placed the h:form which encapsulate the input elements of the form "outside" the panel and attached the panel to it.
But since there are other ways to solve this "form issue" (using only one form and group with regions or explicitly specifying the id of the h:form in the rerender id list), I now know how to handle the "whole" issue.
Bye Manuel