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...