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 😀
hicham7412 23:20 am Mittwoch, 23. Juni 2010 Permalink | Zum Antworten anmelden
Hi Andreas,
interesting post, I am just wondering why you always put return false; in the handler of the hotKey.
Andreas Höhmann 8:40 am Donnerstag, 24. Juni 2010 Permalink | Zum Antworten anmelden
I do this because it would stop the event propagation … Do you think this is not necessary?
event.stopPropagation();event.preventDefault();return false;
ikren05 3:34 am Montag, 23. August 2010 Permalink | Zum Antworten anmelden
hi!
i’ve just done the same.. clicking enter saves the changes. clicking esc does nothing.. anyone, please help.. thank you in advance 😀
Andreas Höhmann 7:55 am Montag, 23. August 2010 Permalink | Zum Antworten anmelden
Post your template code here … lets find the probleme together.
dominic89 16:14 am Donnerstag, 26. August 2010 Permalink | Zum Antworten anmelden
hi,
I tried a little diffrent way to close the ModalPanel. I have a Textinputfield with attribute required =“true“.
If I press the save button the ModalPanel is empty (no Text,Fields and Buttons are shown) but it doesn’t close.
Maybe you have an idea why the panel doesn’t close
thank you in advance
Andreas Höhmann 21:50 am Donnerstag, 26. August 2010 Permalink | Zum Antworten anmelden
Maybe there is a validation error?!
But if you fire the „hide panel“ javascript code in oncomplete … the panel should always be closed. Be free to post a message in the richfaces forum: http://community.jboss.org/en/richfaces?view=discussions
Regards
Andreas
rajendraj 7:44 am Dienstag, 31. August 2010 Permalink | Zum Antworten anmelden
Hai Andreas,
I am new to rich faces; I am using calendar component i can able select the date from the calendar component, now i am trying to enter date into the calendar component for that i have used enable manual inout = ‚true‘ and i am able to enter date into the calendar component.I have kept the datepattern =’dd-MMM-yyyy‘ so accordingly i am able to enter date. Now my question or functionality is:
Q. I need to enter date manually into the calendar component like:31082010
after an event like onblur or onenterkeypress it should change the pattern into user defined format like(31-Aug-2010).
How to achieve in the calendar component, Is it same like text field entry??
Please explain me how to do that???
Andreas Höhmann 8:10 am Mittwoch, 1. September 2010 Permalink | Zum Antworten anmelden
Currently it seems you must parse the input on the client (with javascript) into the format which was defined on the calender-component.
The thread is here : http://community.jboss.org/message/559534#559534
rajendraj 7:46 am Dienstag, 31. August 2010 Permalink | Zum Antworten anmelden
I forgot to tell; I have asked this question in rich faces forums also, please tell how to achieve the above functionality?? Thanks in advance Andreas