CODEWITHSUNDEEP
jsf-2primefaces
yankee
yankee

Reputation: 509

Primefaces dynamic overlayPanel showing only once

I have a form with a button that opens a Primafaces overlayPanel. In the panel there is another button that performs an Ajax action and then closes the overlay.
Here is a simplified version with no Ajax action at all: 

<h:form>
    <p:commandButton id="button1" value="Open overlay" type="button"/>
    <p:overlayPanel for="button1" widgetVar="ovl" dynamic="true">
        <p:commandButton value="Close" oncomplete="ovl.hide();"
                         update="@form"/>
    </p:overlayPanel>
</h:form>

Please note that the panel must have dynamic="true" because dynamic content must be fetched in the real application, and update="@form" is needed in order to update other form components.

The problem is: if I have both attibutes, dynamic="true" and update="@form" the overlay shows up only the first time. After clicking the "close" button, if I try to click on "open overlay" once more, the panel won't show up.

What am I doing wrong?

(Using PrimeFaces 3.5 and GlassFish 3.1.2.2)

Upvotes: 8

Views: 14826

Answers (3)

A.v
A.v

Reputation: 744

You should give your overlayPanel an id and oncompelete of your button show it. The code goes like this:

<h:form>
   <p:commandButton id="button1" value="Open overlay" type="button" oncomplete="PF('ovlID').show()"/>
   <p:overlayPanel id="ovlID" for="button1" widgetVar="ovl" dynamic="true">
      <p:commandButton value="Close" oncomplete="ovl.hide();"
                     update="@form"/>
   </p:overlayPanel>
</h:form>

Upvotes: 0

Marcus Oblak
Marcus Oblak

Reputation: 131

Use onclick="widgetVar.loadContents()" in the button dropping down the overlaypanel, where widgetVar is the var of the overlayPanel.

Upvotes: 13

Aksel Willgert
Aksel Willgert

Reputation: 11537

What i noticed with below code is as soon as you do update on the form containing the Open-Overlay-button, it breaks. 

<h:form>
    <p:commandButton id="button1" value="Open overlay" type="button"/>
    <p:commandButton value="break things" update="@form" />
    <p:overlayPanel for="button1" dynamic="true">
        <p:commandButton value="Close" update="@form" />
    </p:overlayPanel>
</h:form>

If it is okay to split the form into two, the button embedded in the OverlayPanel, could try to invoke click on the button used to toggle the overlay. Perhaps something in line with below.

<h:form>
    <p:commandButton id="button1" value="Open overlay" type="button"/>
    <p:overlayPanel for="button1" dynamic="true" >
        <p:commandButton value="Close" update=":formToBeUpdated" onclick="document.getElementById('button1').click();"/>
    </p:overlayPanel>
</h:form>

<h:form id="formToBeUpdated">
    <h:inputText value="bleh"/>
</h:form>

Upvotes: 0

Related Questions