how to close p:dialog on ESC key

UI Components for JSF
martib
Posts: 38
Joined: 28 Dec 2011, 14:58
Location: Switzerland

30 May 2012, 16:20

I need to close a modal dialog on users key stroke ESC key.
But I've read in the manual (primefaces 3.3), this is not possible if there is a inputText field on dialog form.

Following code opens a dialog but it can't be closed on escape.
If p:inputText is omitted, close on escape works fine.
Is there a workaround to have it work with inputText fields too?

Code: Select all

    
    <h:form id="frmTest" prependId="false">
        <p:commandLink 
            value="open dialog"
            oncomplete="dialogWidget1.show()" 
            actionListener="#{jsfController.preAction1}"
            update=":frmDialog1"/>
    </h:form>

    <p:dialog id="dialog1" widgetVar="dialogWidget1" modal="true" resizable="false">
        <h:form id="frmDialog1">  

            <p:hotkey bind="esc" handler="dialogWidget1.hide()"/>

            <h:panelGrid id="pnlDialog1" styleClass="panelGridNoBorder">
                <p:row>
                    <h:outputLabel for="firstname" value="input field: "/>
                    <p:inputText value="#{jsfController.firstname}"
                                 id="firstname" required="true"/>  

                </p:row>
                <f:facet name="footer">
                    <p:commandButton value="execute"
                                     update=":frmTest, :frmDialog1"
                                     actionListener="#{jsfController.action1}"
                                     oncomplete="handleDialog1(xhr, status, args)"/>  
                </f:facet>  
            </h:panelGrid>
        </h:form>
    </p:dialog>
    
    <script type="text/javascript">
        function handleDialog1(xhr, status, args) {  
            if(args.validationFailed) {  
                jQuery('#dialog1').effect("shake", { times:2 }, 50);
                dialogWidget1.show();
            } else {  
                dialogWidget1.hide();  
            }  
        }
    </script>                 
    
PF 6.x, Weblogic 12c, JDK8, NetBeans 8.x

Primeval
Posts: 45
Joined: 23 Apr 2012, 19:48
Location: Berlin, DE

30 May 2012, 23:19

I did not know if the hotkey Component have the immediate attribute. if yes - set the immediate to "true". Then input text will not validated or you set the required attribute to false and validate the input in the
managed bean e.g.

Code: Select all

public class JsfController{

public void action1(){
if(firstname == null) RequestContext.getCurrentInstance().addCallbackParam("validationFailed",true);
}

}
Greetz
Primefaces 4.0, Primefaces Ext. 1.0.0,
Prettyfaces 3.3.3/ URLRewrite 2.0.7, OmniFaces 1.5 (1.6.1 -> testing), Atmosphere 2.0.2, JBoss EL 2.2, JUEL 2.2.6
JBoss 7.1.1 with Mojarra 2.1.26

martib
Posts: 38
Joined: 28 Dec 2011, 14:58
Location: Switzerland

31 May 2012, 07:52

I think it's not a problem of 'validationFailed'. Either immediate='true' or 'false' works.
Key stroke 'escape' gets not recognized and the action 'action1' wont be called either.
I would like to have a functionality to close the modal dialog on 'escape'. This works if NO inputText is present on dialog, but not with.

I've got a little sample webapp. Where or how can I add it, here?
PF 6.x, Weblogic 12c, JDK8, NetBeans 8.x

Alex
Posts: 256
Joined: 16 Dec 2010, 14:24
Location: Germany

31 May 2012, 08:36

PrimeFaces 3.2
Mojarra 2.0.2
Glassfish 3.0.1

martib
Posts: 38
Joined: 28 Dec 2011, 14:58
Location: Switzerland

12 Jun 2012, 22:47

sorry for my delay.
I don't understand this link. Where can I upload my sample?
PF 6.x, Weblogic 12c, JDK8, NetBeans 8.x

Darac
Posts: 17
Joined: 22 Feb 2012, 14:32

13 Jun 2012, 07:50

I believe that the shortcut doesn't work if an input element is in focus.
PrimeFaces 3.3 / Mojarra 2.1.3 (FCS b02) / Glassfish 3.1.1

martib
Posts: 38
Joined: 28 Dec 2011, 14:58
Location: Switzerland

13 Jun 2012, 12:06

yes, correct.
As described in PF documentation 3.3 page 211:
Note that hotkey will not be triggered if there is a focused input on page

That's exactly the problem. I've got some input elements on my dialog.
But why should it not possible to have a hotkey handler closeOnEscape anyway?

Should I add this as a new issue on issue tracker?
PF 6.x, Weblogic 12c, JDK8, NetBeans 8.x

Darac
Posts: 17
Joined: 22 Feb 2012, 14:32

14 Jun 2012, 07:39

martib wrote:That's exactly the problem. I've got some input elements on my dialog.
But why should it not possible to have a hotkey handler closeOnEscape anyway?

Should I add this as a new issue on issue tracker?
Yeah, I would like to have this feature as well. In most cases I have some sort of input in my dialogs.
PrimeFaces 3.3 / Mojarra 2.1.3 (FCS b02) / Glassfish 3.1.1

csotolani
Posts: 4
Joined: 17 Jul 2012, 00:09

17 Jul 2012, 00:15

Code: Select all

function closeOnEscape() {
	
	var closeable;
	var indexHighest = 0;	
           		             		  
	jQuery(".ui-dialog.ui-widget.ui-widget-content.ui-overlay-visible").each(function() {
		
		var indexCurrent = parseInt($(this).css("zIndex"), 10);
            		
		if (indexCurrent > indexHighest) {
			indexHighest = indexCurrent;
			closeable = this;
		}
	       		    
	});	
	
	if (closeable != null) {
		
		jQuery(closeable).removeClass('ui-overlay-visible').addClass('ui-overlay-hidden');
		jQuery(closeable).css({'visibility':'', 'z-index':'', 'display':''});
           			
		var modal = '#' + jQuery(closeable).attr('id') + '_modal';
           			
		jQuery(modal).remove();
		
	}
};

<p:hotkey bind="esc" handler="closeOnEscape();" />

martib
Posts: 38
Joined: 28 Dec 2011, 14:58
Location: Switzerland

17 Jul 2012, 10:10

hmm, does not work.
Because,
I found out that

Code: Select all

<p:hotkey bind="esc" handler="dialogWidget1.hide()"/>
does work if I move the mouse over the dialog and click in its background (not on a input component, only background).
Strange.
PF 6.x, Weblogic 12c, JDK8, NetBeans 8.x

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 22 guests