Search code examples
jsfpopuprichfaces

JSF commanbutton refreshes the page and popup menu disappears immediately

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

Solution

  • <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 :