JSF commanbutton refreshes the page and popup menu disappears immediately

Question

I am trying to show a popup menu in by checking some conditions, such as if something is not selected show popup etc. and if everyhing is fine submit the page. Here is the code:

<h:commandButton onclick="if (#{moneyTransferManager.showPopup()})
                                    #{rich:component('popup')}.show();"  value="Devam" >
      <rich:componentControl target="popup" operation="show" />

      </h:commandButton>
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
      <f:facet name="header">
      <h:outputText value="Simple popup panel" />
      </f:facet>
      <f:facet name="controls">
      <h:outputLink value="#" onclick="#{rich:component('popup')}.hide();
                                return false;">
                                    X
      </h:outputLink>
      </f:facet>
       <p>
          The popup panel is open and closed from the javascript function of component client side object. The following code
                                <a href="#" onclick="#{rich:component('popup')}.hide()">hide this panel</a>:
      <f:verbatim>&#35;</f:verbatim> #{rich:component('popup')}.hide()
      </p>
      </rich:popupPanel>

then after button is clicked, popup shows for like a second and then page is refreshed and popup is lost. To prevent refreshing page i tried:

<f:ajax execute="@form" render="@none" />

but then if everything is right and if i don't need a popup i need to submit the page by commandbutton, but since i say render=@"none" i cannot do this. So what can i do about this situation?

Thanks

Do you want to show a popup and submit the form at the same time? — erencan, Jul 15 '13 at 06:24

score 1 · Accepted Answer · edited May 23 '17 at 10:34

<h:commandButton> has a default button type submit which submits enclosing h:form when it is clicked. That is why the page refreshes when you click.

<h:button> should be used for java script usage.In addition, <h:commandButton> becomes <h:button> if type attribute is set to button.

<h:button onclick="if (#{moneyTransferManager.showPopup()})
                                        #{rich:component('popup')}.show();" value="Devam"/>

Or

<h:commandButton type="button" onclick="if (#{moneyTransferManager.showPopup()})
                                    #{rich:component('popup')}.show();"  value="Devam" >

See Also :

Difference between h:button and h:commandButton

JSF commanbutton refreshes the page and popup menu disappears immediately

1 Answers1