Calls one or several javascript functions when a specified event occurs.
Even if domajax tries to handle most ajax use cases to avoid javascript usage, you may need to customize domajax behaviour,
such as cancel an ajax call if a form is invalid, or process the ajax response manually.
data-callback-before is processed before other options and before the ajax call. Its callback should return false to abord
the ajax call.
Other data-callback-(event) are also processed early after getting the ajax response. Callbacks should return
false to abord the standard domajax response processing.
You can call several functions, by separating them using a space. They will be called in your defined order.
Callbacks take 4 arguments : elem (the jQuery element that contains the ajax call), response, textStatus,
jqXHR (the 3 arguments given by jQuery.ajax to success/error callbacks, set to undefined on before/complete domajax callbacks).
This form looks like this:
<input
type="button"
value="Click me to get the time"
class="btn domajax click"
data-endpoint="callback-basic-handler.php"
data-callback-success="alert_time"
/>
<script type="text/javascript">
function alert_time(elem, response, textStatus, jqXHR) {
alert(response);
}
</script>
This form looks like this:
<div id="inputs">
<label for="number">Enter a number</label>
<input type="text" id="number" name="number"/>
<br/>
<input
type="button"
value="Send"
class="btn domajax click"
data-endpoint="callback-form-handler.php"
data-input="#inputs"
data-output="#output"
data-callback-before="$.my_validate_form"
/>
</div>
<div id="output"></div>
<script type="text/javascript">
/* Not useful to add this function to jQuery, but shows you that namespaced functions can also be used */
(function ($) {
$.my_validate_form = function () {
var number = $('#number').val();
if (!/^-?\d+(\.\d+)?$/.test(number)) {
alert('Not a valid number!');
return false;
}
};
})(jQuery);
</script>
This form looks like this:
<input
type="button"
value="Click to save"
class="btn domajax click"
data-endpoint="callback-log-in-handler.php"
data-callback-failure="checkError"
data-output="#output"
/>
<div id="output"></div>
<script type="text/javascript">
function checkError(elem, errorThrown, textStatus, jqXHR) {
switch (jqXHR.status) {
case 403:
$('#output').html('You should <a>log-in</a> to access this resource.');
break;
case 500:
$('#output').html('An error occured, please try again later.');
break;
default:
break;
}
}
</script>
This form looks like this:
<input
type="button"
value="Click me"
class="btn domajax click"
data-endpoint="callback-several-handler.php"
data-callback-success="tellTimeInEnglish tellTimeInFrench"
/>
<script type="text/javascript">
function tellTimeInEnglish(elem, response) {
alert("It is now " + response);
}
function tellTimeInFrench(elem, response) {
alert("Il est maintenant " + response);
}
</script>
All the documentation at a glance