Is there a java command that can close a primefaces overlay panel?

Question

Is there a java command that can close a primefaces overlay panel? Or is there a way to make a button inside of an overlay panel close the panel when the button is clicked?

score 6 · Answer 1 · answered Nov 20 '15 at 12:41

6

You can easy add a button to your overlaypanel to close it e.g.

<p:overlayPanel widgetVar="myOverlayPanel" ... >
  <p:commandButton ... onComplete="PF('myOverlayPanel').hide(); ... />
</p:overlayPanel>

Also you can do this in Java

private void doSomething() {
  RequestContext ctx = RequestContext.getCurrentInstance();
  ctx.execute("PF('myOverlayPanel').hide();");
}

answered Nov 20 '15 at 12:41

Arthur Welsch

269
2
15

This solution worked for me in PF 6.2, except that I had to use the `onclick` event instead of `onComplete`. – Jake Reece Feb 12 '19 at 20:28

score 1 · Accepted Answer · answered Apr 26 '19 at 13:53

I've found that (in PrimeFaces 7.0 at least) a p:commandButton that merely updates the form or any component outside the overlayPanel will close the overlayPanel. For example,

<p:commandButton value="Close" update="myform" />

My only concern is that I can't find documentation that explains specifically that or why this happens, so I'm a little hesitant to depend on it. On the other hand, it seems to do a cleaner job than onclick="PF('panelWidgetVar').hide();", which tends to blank my browser window and redraw the whole page, whereas update alone seems to refresh just those parts of the page I need updated.

Diego Alpízar · Answer 3 · 2013-08-12T19:29:28.957

Put this inside p:overlayPanel tag and set p:effect 'for' attrib with overlayPanel id, use the appendToBody=true.

 <p:commandLink styleClass="ui-icon ui-icon-triangle-1-e">
        <p:effect type="slide"  for="idOverlayPanel" event="click">
            <f:param name="mode" value="'hide'"/>
            <f:param name="direction" value="'right'"/>
        </p:effect>
    </p:commandLink>

Without effect parameters

<p:commandLink styleClass="ui-icon ui-icon-close" >
    <p:effect type="slide"  for="idOverlayPanel" event="click"/>
</p:commandLink>

You can change slide effect to anotherone, icon style class too.

Sorry for my bad english

score 0 · Answer 4 · edited Aug 09 '16 at 07:59

I have done this with jQuery and css. please check below code

<p:overlayPanel widgetVar="overlay" showEffect="blind" showCloseIcon="true" styleClass="lane-overlay" dynamic="true" dismissable="true" hideEffect="blind">
<script>
$(document).ready(function(){
$(".closeIcon").click(function(){
$(".lane-overlay").hide();
});
});
</script>
<p:commandButton value="close"  styleClass="closeIcon"/>
`enter code here`

score 0 · Answer 5 · edited Jan 16 '19 at 22:01

how about something like (haven't tested myself)

client side only solution

<p:commandButton id="basic" onclick="jQuery('#IdOfThePanel').hide()"></p:commandButton>

or client side + server side

jsf:

<p:commandButton value="Save" actionListener="#{myBean.doSomething}"/>

java:

public void doSomething(ActionEvent actionEvent) {

    RequestContext context = RequestContext.getCurrentInstance();
    context.execute("jQuery('#IdOfThePanel').hide()");
}

take a look here on executing js from java

Executing Javascript from Server Side

p.s maybe instead of IdOfThePanel you'll have to add some prefix like formID:IdOfThePanel... depends on your case...

Edit: instead of jQuery('#IdOfThePanel').hide() just use panelWidgetVar.hide() or in more recent PrimeFaces versions, PF('panelWidgetVar').hide()

overlayPanelWidgetVar.hide() would be easier to use. – Cagatay Civici Mar 22 '12 at 22:17 — Cagatay Civici, Mar 22 '12 at 22:17

Is there a java command that can close a primefaces overlay panel?

5 Answers5