Richfaces modal panel default formular action


Each input dialog should have a default action for good useability.

If the user hit ‚Enter‘ then the default action should execute.

Here is my example of a richfaces modal edit dialog for such a requirement …

The dialog have input fields and 3 actions:

  • save – is the default action if the user hit ‚Enter‚ anywhere in the formular
  • cancel – is the default action if the user hit ‚Esc‚ anywhere in the formular
  • reset
<modalPanel id="edit_dialog">
  <a4j:form id="edit_form" ajaxSubmit="true">

    <!-- some fields ... -->
    <outputLabel value="What's your title:" for="title"/>
    <inputText  id="title" value="#{bean.title}"/>
    <outputLabel value="What's your name:" for="name"/>
    <inputText  id="name" value="#{bean.name}"/>

    <!-- the actions ... -->
    <a4j:commandButton id="save" value="Save" action="#{bean.save}" type="submit"
         oncomplete="if(#{facesContext.maximumSeverity==null}) Richfaces.hideModalPanel('edit_dialog')"/>
         <!-- if no error then close the edit-dialog ... 
                is not necessary if you don't use dialogs -->

     <a4j:commandButton id="reset" value="Reset" action="#{bean.reset}"
          limitToList="true" reRender="edit_form" ajaxSingle="true" type="reset"/>

     <a4j:commandButton id="cancel" value="Cancel" action="#{bean.cancel}" ajaxSingle="true"
          oncomplete="Richfaces.hideModalPanel('edit_dialog')"/>

     <!-- the default actions for the formular 'onEnter' and 'onEsc' ... -->
     <rich:hotKey key="return" selector="#edit_form"
         handler="${rich:element('edit_form:save')}.click();event.stopPropagation();event.preventDefault(); return false;"
         disableInInput="false"/>

     <rich:hotKey key="esc" selector="#edit_form"
         handler="${rich:element('edit_form:cancel')}.click();event.stopPropagation();event.preventDefault(); return false;"
         disableInInput="false"/>

   </a4j:form>
</rich:modalPanel>

It’s important to define ajaxSubmit=“true“ for the form! This avoid „none ajax submit of html formulars“. I will explain this in a later blog🙂

With rich:hotKey I bind 2 key events to the edit formular:

  • on ‚enter‘ – the handler click the save button
  • on ‚esc‘ – the handler click the cancel button

Try it😀