JSF 2.0 Ajax Problem - ajax

I have some <h:inputText> on my form and two <h:commandButton>s, one commandbutton submits the form in a classic manner and the other one has a <f:ajax>, how can I prevent the form from submitting when the user presses Enter key in one of my inputs which triggers the second button?

If you don't have textareas in your form, just add the following to the <h:form>.
<h:form onkeypress="return event.keyCode != 13">
The Enter key has the key code 13, so the above returns false to the form whenever it is been pressed, so the default action won't take place anymore.
However, if you have textareas in your form (<h:inputTextArea> and on), where you'd like to have the Enter key to function as usual, then you need to put the onkeypress attribute in all non-textarea input fields instead. You can use JS/jQuery for this to minimize code duplication.

Related

How to submit the value in an inputtext field by setting autoSubmit to false

I have an ADF form based on a VO and I need to check whether a particular field is null or not on click of a Submit button. For this, i set autoSubmit to true and get the value entered to a variable in my bean.On click of Submit button , i check if the variable is null or not and display error faces message if the variable is null. But how do i get the value entered in the form to a variable in the bean with autoSubmit set to false?
Why do you have it turned on in the first place? And why do you want to turn it off? Are you clear on it's functioning and why to use it?
Autosubmit is used to support Partial-Page Refresh.
If you don't need PPR, Just turn it off. The value will still be available once the submit button is pressed. Read about it here.
An input component that has its autosubmit property set to true also
performs a partial submit of the form. However, this time it doesn't
submit the entire form but only the component that triggers the submit
plus components referenced it in their PartialTriggers property.
Autosubmit is not required to access values entered into input components on the screen. Autosubmit submits only the field and also bypasses certain phases of the page processing lifecycle.
if you turn autosubmit off, the entire page - all the fields - is submitted and goes through the complete page processing lifecycle, so you have access to all input fields.
Docs here.

Hidden form submits on enter key pressed

I've two form in the page. One is hidden by default. The hidden form submits when I press enter from keyboard.
How to avoid that ?
I've two form. One is HttpGet and another one is HttpPost. But when press enter key from keyboard, It always call HttpPost instead of HttpGet.
There are two possibilities to resolve this.
Remove the form which is in Http.Get.
If it is required, then have different action names for HttpGet and HttpPost.

Trigger validation and redraw on different component via ajax

I have a wicket page with a couple of TextFields that have different kind of validators. So far, validation is triggered via Ajax on the onChange event.
I also have a checkbox that defines which set of validation rules should be used for the TextFields.
If I click the checkbox and then input data into the TextFields, validation works just fine. But how do I handle the fact that already entered and validated data can suddenly become invalid if the checkbox is clicked afterwards? How do I trigger the validation and the redraw (to show the error notification) of the TextFields from within an AjaxEvent from the checkbox?
I tried to call myTextField.validate() but that didn't trigger any of my validators.
Since your validation is based on multiple components you should implement IFormValidator. Pass both checkbox and textfield in getDependentFormComponents() and change of either will trigger it.
Also if you are using checkbox to refresh some elements make sure to use AjaxCheckbox, that has onUpdate(AjaxRequestTarget) method.
You could attach an AjaxFormSubmitBehavior in the checkbox. This would submit the form and trigger validation each time the checkbox value is toggled.

JSF validate dialog form

I have a dialog form popup when I click one button, this form is used to create a new school record with just one field.
I have add required validation to this only input field, and everything works fine, but the only thing I don't know how to do is when I click submit, whatever form validate or not, the dialog will dismiss by following code:
initDataTable();
// Dismiss the dialog
$('#dialogNewSchool').dialog('close');
before the dialog close, I should put the form validation check (something like the return from validation class), how I can do this in javascript? I'm using JSF 2.1 implementation.
Btw, I don't want to use client side validation, because not only required validation needed for this field.
Thanks. ;)
If I got you right you want to keep dialog open in case of validation errors?
Than you can add the following code somewhere in your page
<h:panelGroup id="global_flag_validation_failed_render">
<h:outputText id="global_flag_validation_failed" value="true" rendered="#{facesContext.validationFailed}"/>
</h:panelGroup>
And upon clicking your submit button render the above block like this:
<f:ajax onevent="closeMyDialogIfAllOk" render="#form global_flag_validation_failed_render"></f:ajax>
and in your js code
function closeMyDialogIfAllOk(data){
if(data.status === 'success') {
if($("#global_flag_validation_failed").length === 0){
$("#dialog_id").dialog("close");
}
}
}
For more info take a look over here: How to find indication of a Validation error (required=“true”) while doing ajax command

Multiple submit buttons with unique ids

In my application, I am trying to create a form that has some text fields and a collection of attachments. The user will have the ability to load an existing form from the database, and edit the fields and also add/remove individual attachments from the attachment collection.
For this purpose, in my view I have a foreach loop that renders the attachment details (id, name) AND also a submit button to remove the attachment. There is also a main submit button at the bottom of the form that the user can click once they have finished editing the form.
I have followed this solution to implement multiple submit buttons in my form. However the problem I have is when the user wants to remove an attachment, I would need to pass the attachment ID as a parameter to the "RemoveAttachment" action when the user clicks the submit button next to the attachment. But as it is, the application passes the main form ID to the RemoveAttachment action. Is there a way to pass the attachment ID when the user clicks the button?
Many thanks
Using a little javascript, first add a hidden field to your form:
<input type="hidden" name="attachmentID" id="attachmentID">
Then, on each of the submit buttons:
<input type="submit" onclick="document.getElementById('attachmentID').value='#ATTACHMENT_ID'" />
Of course, you replace ATTACHMENT_ID with whatever variable contains the id.
You can make a separate <form> for each remove button, with a hidden input (or URL parameter) specifying the ID.
Beware that <form>s cannot be nested.

Resources