Board index JavaServer Faces General how to close p:dialog on ESC key

how to close p:dialog on ESC key

Components, Ajax Framework, Utilities and More.


Posts: 25
Location: Switzerland
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?
   
    <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 3.5.x, Mojarra 2.1.x, Weblogic 10.3.x, JDK6-7, JRockit, NetBeans 7.3/7.4.


Posts: 45
Location: Berlin, DE
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.

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


Posts: 25
Location: Switzerland
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 3.5.x, Mojarra 2.1.x, Weblogic 10.3.x, JDK6-7, JRockit, NetBeans 7.3/7.4.


Posts: 256
Location: Germany
PrimeFaces 3.2
Mojarra 2.0.2
Glassfish 3.0.1


Posts: 25
Location: Switzerland
sorry for my delay.
I don't understand this link. Where can I upload my sample?
PF 3.5.x, Mojarra 2.1.x, Weblogic 10.3.x, JDK6-7, JRockit, NetBeans 7.3/7.4.


Posts: 17
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


Posts: 25
Location: Switzerland
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 3.5.x, Mojarra 2.1.x, Weblogic 10.3.x, JDK6-7, JRockit, NetBeans 7.3/7.4.


Posts: 17
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


Posts: 4
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();" />


Posts: 25
Location: Switzerland
hmm, does not work.
Because,
I found out that
<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 3.5.x, Mojarra 2.1.x, Weblogic 10.3.x, JDK6-7, JRockit, NetBeans 7.3/7.4.

Next

Return to General