CODEWITHSUNDEEP
javajsfprimefaces
user1776313
user1776313

Reputation: 73

Close all Dialogboxes when click ESCAPE(ESC) in primefaces

I am working with 4-5 primefaces dialogboxes. When click ESC i want close all dialogboxes which are opened.

Upvotes: 5

Views: 4028

Answers (2)

Hatem Alimam
Hatem Alimam

Reputation: 10048

Although the post is old, but the answer is rather a static solution, here's a dynamic one using jQuery.

function escDialog() {
   $(document).keyup(function(e) {
       if (e.keyCode == 27) { // esc code is 27 
           closeAllDialog() ;
       }   
   });
}

function closeAllDialog() {
   for (var propertyName in PrimeFaces.widgets) {
     if (PrimeFaces.widgets[propertyName] instanceof PrimeFaces.widget.Dialog ||
         PrimeFaces.widgets[propertyName] instanceof PrimeFaces.widget.LightBox) {
         PrimeFaces.widgets[propertyName].hide();
     }
   }
}

Then in your document.ready you would call escDialog()

Hope this helps.

Upvotes: 4

Akos K
Akos K

Reputation: 7133

Call the dialog's hide() function through the client side object specified with widgetVar. So if you defined your p:dialog like:

<p:dialog widgetVar="dialog1" header="Dialog 1"/>
<p:dialog widgetVar="dialog2" header="Dialog 2"/>

Your ESC button should look like:

<p:commandButton value="ESC" onclick="dialog1.hide();dialog2.hide()"/>

You can also create a reusable p:remoteCommand to close all your dialog and use that in your p:commandButton or in p:hotkey - if by "click ESCAPE" you mean hittig the Escape button:

<p:remoteCommand name="closeAll" onsuccess="dialog1.hide();dialog2.hide()"/>

then in your components refer to the closeAll() command:

<p:hotkey bind="esc" handler="closeAll()"/>
<p:commandButton value="ESC" onclick="closeAll()"/>

Upvotes: 4

Related Questions