Updated April 4, 2023
Introduction to jQuery ajax fail
The jQuery ajax fail is an ajax event which is only called if the request fails. The AJAX fail is a global event that triggered on the document to call handler function, which may be listening. The ajax fail can be performed with the help of the ajaxError() function. The jQuery ajaxError() function is a built-in function in jQuery. The function specified by the ajaxError() function is called when the request fails or generates the errors. We can use the fail() callback function as well on the JavaScript promise object( the jqXHR object return by the $.ajax() function) to run the specific function on the ajax request fail.
The syntax of the jQuery ajaxError() function –
$(document).ajaxError(function(event, xhr, options, exc));Parameters –
function(event, xhr, options) – This is not an optional parameter. It specifies the callback function, which will be executed when the sent request fails; it accepts four parameters event, xhr, and options. The event parameter represents the event object. The parameter xhr represents XMLHttpRequest object. The parameter option represents the options used in the ajax request. The last parameter exc would represent the javaScript exception if it occurred.
Return value –
The return value of this function is XMLHttpRequest object.
Working of ajaxError() function
The jQuery ajaxError() function accepts four parameters. Suppose we have to do the asynchronous HTTP GET request to load the data from the server and on the fail of the request (unsuccessfully complete), call the function to display some message to notify the request is fail. So we can use the ajaxError() function as
$(document).ajaxError(function(event, request, settings) { $( "#p2" ).html( "<h1>Request Fail.</h1>"); });”,which display the message “Request Fail” on the fails of the request.
Examples for the jQuery ajaxError() function
Here are the following examples mention below
Example #1
Example of jQuery ajaxError() function to load the data by using ajax request from the specified location and on the fail of the request display notification message –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<title> This is an example for jQuery ajax Error() function </title>
</head>
<body>
<h3> This an example of jQuery ajax fail: </h3>
<button id = "btn" > Load and call the ajaxError() function </button>
<br>
<p id = "p1" style = "color : red"> </p>
<p id = "p2" style = "color : red"> </p>
<script>
$( document ).ready( function(){
$( document ).ajaxError( function(){
$( "#p1" ).text("An error occurred!");
});
$( "#btn").click( function(){
$( "#p2" ).load( "wrongfile.txt");
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the “Load and call the ajaxError() function” button, the output is –
In the above code, when we click on the button, the load() function will call, which sends the ajax request to the server to get the data. The load() function load the data from the server and put the loaded data to the selected element if the request is successful. If the request fails the ajaxError() function display the notification message as “$(document).ajaxError(function(){ $(“#p1”).text(“An error occurred!”);});”. So, once the ajax request fails, the “An error occurred!” Message will be displayed, as we can see in the above output.
Example #2
Example of jQuery ajaxError() function to load the data by using ajax request from the specified location and on the fail of the request display notification message with the global ajaxError() callback function –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax fail</title>
</head>
<body>
<h3> This an example of jQuery ajax fail: </h3>
<button id = "Btn" > Send the ajax request which will fail. </button>
<br>
<p style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url is not correct to get the data, because of which the request will fail
var ajxReq = $.ajax( 'http://time.com', {
contentType : 'application/json',
dataType : 'json',
timeout : 600
});
ajxReq.success( function ( data, status, jqXhr ) {
$( "p" ).append( "First data is : " + data.date + ".<br> Second data is : " + data.milliseconds_since_epoch + ".<br> Thirs data is : " + + data.time );
});
ajxReq.error( function ( jqXhr, textStatus, errorMessage ) {
$( "p" ).append( "The Status is : " + textStatus);
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the “Load and call the ajaxsuccess() function” button, the output is –
In the above code, when we click on the button, the load() function will call, which sends the ajax request to the server to get the data. The load() function load the data from the server and put the loaded data to the selected element. But if the request is fails the global ajaxError() callback function used to shows the status of the request as “ajxReq.error( function ( jqXhr, textStatus, errorMessage ){$(“p”).append(“The Status is : ” + textStatus);});”. So, once the ajax request fails, the request status will be display; as we can see in the above output, the request status is an error.
Example #3
Example of jQuery ajaxError() function to load the data by using ajax request from the specified location and on the fail of the request display notification message with the fail() callback function –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax fail</title>
</head>
<body>
<h3> This an example of jQuery ajax fail : </h3>
<button id = "Btn" > Send the ajax request which will fail. </button>
<br>
<p style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url is not correct to get the data, because of which the request will fail
$.ajax({
url: "/app-url/",
type: "GET",
dataType: 'json',
})
.done (function(data, textStatus, jqXHR) {
alert("The request success is : " + response);
})
.fail (function(jqXHR, textStatus, errorThrown) {
alert("The request generate error");
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) {
alert("The request is complete");
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
Click on the ok button, the output is –
In the above code, when we click on the button, the load() function will call, which sends the ajax request to the server to get the data. But if the request is fails the fail() callback function used to call on the jqXHR object return by the ajax() function and display the notification message of the request as “.fail (function(jqXHR, textStatus, errorThrown) { alert(“The request generate error”); })”. So, once the ajax request fails, the alert message will be displayed, as we can see in the above output.
Conclusion – jQuery ajax fail
The jQuery ajaxError() function is a built-in function in jQuery, which is used to specifies a handler function to be run when the ajax request fails.
Recommended Articles
This is a guide to jQuery ajax fail. Here we discuss the Working of the ajaxError() function along with the examples and output. You may also have a look at the following articles to learn more –
