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 😀

Disable backspace key in a Richfaces application

If you want disable the Backspace key in your JSF Richfaces application put this in your view:

<rich:hotKey key="backspace" handler="return false;" disableInInput="true"/>

This will register a jQuery Hotkey handler for the document. The handler is not reqistered for input elements because in input fields you need the backspace ;-). Tested for FF3 and IE6.

Then I found out that the following snippet doesn’t work:

<rich:hotKey key="backspace"
             disableInInput="true"
             handler="alert('Backspace is disabled'); return false;" />

The Browser open the alert box and go to the previous page (in background?!). But there is a fix for that:

<rich:hotKey key="backspace"
             disableInInput="true"
             handler="alert('Backspace is disabled'); event.stopPropagation(); event.preventDefault(); return false;" />

The event variable is available in the handler function (see org.richfaces.renderkit.html.HotKeyRenderer method doEncodeEnd).