This tutorial explains the usage of ajaxError() method in jQuery. The ajaxError() is the jQuery Ajax event which specifies the function to be executed when Ajax requests fails to complete or completes with an error. This event is only called if an error occurred with the Ajax requests.
We can never have both success and error callback with a request. When error occurred with Ajax requests, all handlers that are attached with ajaxError() method are executed this time. According to jQuery 1.8, the ajaxError() event should be attached only to the document.
JQuery ajaxError Event Syntax
$[selector].ajaxError([callback])
It has parameter called callback which represents a function to be run when Ajax request fails.
JQuery ajaxError Event Example
<!doctype html>
<head>
<title>JQuery ajaxError Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery ajaxError Event Example</h2>
<style>
div{
color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#mydiv").load("myajax_example.txt");
});
$(document).ajaxError(function(){
$("#mydiv").text("Error in loading the file!!!");
});
});
</script>
<body>
<div id="mydiv">Click on the button to check error message</p>
<button>Click Here</button>
</body>
</html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“#mydiv”).load(“myajax_example.txt”); line defines load method which occurs when specified element has been loaded.
- $(document).ajaxError(function()) line specifies ajaxError() method which runs a function when the ajax request completes with an error. The ajaxError() event should be attached only to the document.
- $(“#mydiv”).text(“Error in loading the file!!!”); line specifies an error message which should display when the specified file is not found.
JQuery ajaxError Event Demo
When you run the above example, you would get the following output:
PrimeFaces + Spring Data using PagingAndSortingRepository Example