AjaxHandler\JQuery
Currently the only available AjaxHandler.
It uses the jQuery library (www.jquery.com). The jQuery library is not included. Please include it yourself.
Note: Since version 1.5.0 AjaxHandler_JQuery requires jQuery 1.7 or higher.
IMPORTANT: With version 2.2.0 AjaxHandler\JQuery was rewritten
The JS code has JQuery plugin style now and multiple AJAX forms on a page should not interfere with eachother anymore.
As a result the options "alias", "ajaxSubmitCallback" and "ajaxValidationCallback" have no effect anymore.
If you want to use callbacks, please configure a formID in your TypoScript and add this id to your form tag. Then, you can bind these events:
Version added
1.0.0
TypoScript path
plugin.Tx_Formhandler.settings.ajax.x
Example code
$(function(){
$(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('submitStart', function(event) {
});
$(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('submitComplete', function(event, data, status) {
});
$(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('submitFinished', function(event, data, status) {
});
$(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('validateStart', function(event, field) {
});
$(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('validateComplete', function(event, field, result) {
});
$(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('validateFinished', function(event, field, result) {
});
$(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('fileRemoveStart', function(event, removeLink) {
});
$(".Tx-Formhandler:has(FORM[id=\"contact\"])").on('fileRemoveFinished', function(event, removeLink) {
});
});
Properties
.disableJS
Allows to disable all JS code generated by the AjaxHandler.
Data type
Integer - cObj
Version added
2.3.0
.loading
The loading animation text or image used for AJAX validation.
Data type
String | cObj
Default value
<img src="typo3conf/ext/formhandler/Resources/Images/ajax-loader.gif"/>
Version added
1.0.0
.ok
Content to display if an AJAX validation was successful.
Data type
String | cObj
Default value
<img src="typo3conf/ext/formhandler/Resources/Images/ok.png"/>
Version added
1.0.0
.notOk
Content to display if an AJAX validation failed.
Data type
String | cObj
Default value
<img src="typo3conf/ext/formhandler/Resources/Images/notOk.png"/>
Version added
1.0.0
.autoDisableSubmitButton
If you use AJAX validation, you can disable the submit button until all error checks are valid. If you set this option to "1" Formhandler adds the attribute "disabled" to the submit button. If all AJAX based validation is valid, the attribute is removed and the user can submit the form.
To be able to style the submit button or other stuff based on the validation status, you can add the marker ###validation-status### to your form.
You have to set a formID in TypoScript and in the HTML template for your form!
Data type
Boolean | cObj
Version added
1.1.0
.ajaxSubmit
If set to "1", the form is submitted using an AJAX post request.
The container of the form is replaced with the response HTML.
Data type
Boolean | cObj
Version added
1.1.0
Important
File uploads do not work when using ajaxSubmit. ajaxSubmit doesn't work with disableWrapInBaseClass=1.
.ajaxSubmitLoader
When the form was submitted using AJAX, this text/HTML is shown until the response from the server arrives. So this setting is only useful in combination with ajaxSubmit.
The content of this setting is put into the marker ###loading_ajax-submit###.
Data type
String | cObj
Default value
<span class="loading_ajax-submit"><img src="typo3conf/ext/formhandler/Resources/Images/ajax-loader.gif"></span>
Version added
1.1.0
.ajaxSubmitCallback
Configure the name of a JS function defined before. This function will be called as a callback function after AJAX calls. The function parameters are "data" and "textStatus". More information about the parameters in the jQuery documentation.
Data type
String | cObj
Version added
1.7.0
.ajaxValidationCallback
Configure the name of a JS function defined before. This function will be called as a callback function after an AJAX validation. The function parameters are:
| field | jQuery element | The form field |
| result | jQuery element | The HTML returned by validation |
| isFieldValid | boolean | The validation result |
Data type
String | cObj
Version added
2.0.0
Example code
function validationCallback(field, result, isFieldValid) {
if(!isFieldValid) {
field.addClass("error");
} else {
field.removeClass("error");
}
}
.alias
Configure a custom alias instead of "jQuery" to be used in the generated JS.
Useful in combination with jQuery noConflict.
Data type
String | cObj
Default value
jQuery
Version added
1.3.0
.validationStatusClasses.base
Set a custom base class for the validation status of a form. Only useful in combination with autoDisableSubmitbutton.
Data type
String | cObj
Default value
formhandler-validation-status
Version added
1.3.0
.validationStatusClasses.valid
Set a custom class for the validation status of a valid form. Only useful in combination with autoDisableSubmitbutton.
Data type
String | cObj
Default value
valid
Version added
1.3.0
.validationStatusClasses.invalid
Set a custom class for the validation status of an invalid form. Only useful in combination with autoDisableSubmitbutton.
Data type
String | cObj
Default value
invalid
Version added
1.3.0
.submitButtonSelector
When using ajaxSubmit with more than one form on a page, you might want to set a special JQuery selector for the submit button.
Data type
String | cObj
Default value
.Tx-Formhandler INPUT[type=\'submit\']
Version added
1.4.0
.jsPosition
Control the position the generated JS is placed on the place. Formhandler always places the JS in the head section.
Use the value "footer" to add the JS before the closing body tag.
Use the value "inline" to add the JS inline. Useful if you use "disableAllHeaderCode" (Added in version 1.7.0)
Data type
String | cObj
Version added
1.4.0