Time for action – client-side callbacks for onShow and onHide

Here we will demonstrate how to trigger JavaScript functions when dialog show and hide events happen. Perform the following steps:

  1. Create a Dialog component and two JavaScript functions to be called as callback functions for onShow and onHide events: 
    <h:head>
  <script>
    function simpleDlgOnShowCallback()
    {
      alert('Simple Dialog displayed successfully');
    }

    function simpleDlgOnHideCallback()
    {
      alert('Simple Dialog is closed successfully');
    }
    
  </script>
</h:head>

  
<h:form>
  
  <p:commandButton value="ShowDialog" onclick="dlg1.show();" type="button" />
  <p:commandButton value="HideDialog" onclick="dlg1.hide();" type="button" />
  
  <p:dialog id="simpleDialog" header="Simple Dialog" widgetVar="dlg1" width="300" height="50"
        onShow="simpleDlgOnShowCallback()" onHide="simpleDlgOnHideCallback()">
    <h:outputText value="PrimeFaces Simple Dialog" />
  </p:dialog>

</h:form>

What just happened?

We have created two JavaScript functions, simpleDlgOnShowCallback() and simpleDlgOnHideCallback() and hooked-up as callback functions using the onShow and onHide attributes. When you click on the ShowDialog button, the dialog will be shown and simpleDlgOnShowCallback() will be invoked. Similarly, when you click on the HideDialog button or close the dialog using the close icon, then the dialog will be closed and simpleDlgOnHideCallback() will be invoked.

Handling the dialog close event

For the Dialog component, you can also register event listeners for close, minimize, and maximize events.

上一章目录下一章