C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Friday, October 12, 2012

jQuery Ajax Error Handling Example

jQuery provides an error handler event ajaxError to handle errors which occur while making Ajax requests using jQuery. We can bind the ajaxError event to an error handler method and use the method to display the errors in an user friendly way.

In this post we shall see on how to use the ajaxError event to display the exception details.
We will try to call a HTML page which does not exist in the server and see on how the error is handled.

Add the following code to a page, and click on the Error Handler button.

<title>Ajax Handlers</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Get HTML Response data from the Server

$('#btnErrorHandler').click(function(event) {

event.preventDefault();

$.ajax({

url: "UnknownPage.html",

cache: false,

dataType: "html",

success: function(result) {

$("#divHTML").html(result);

}

});

// Error Handler

$("#divErrorLog").ajaxError(function(objEvent, objHttp, objSettings, jsExe) {

var errMsg;

errMsg += "Request URL: " + objSettings.url + "</br>";

errMsg += "XMLHttpRequest Status: " + objHttp.status + "</br>";

errMsg += "Error Message: " + objHttp.statusText + "</br>";

errMsg += "JavaScript Err Msg: " + jsExe + "</br>";

$("#divErrorLog").html(errMsg);

});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnErrorHandler"

runat="server"

Text="Error Handler" />

</td>

</td>

</tr>

<td>

Error Log:

</td>

<br />

<div id="divErrorLog"

style="color:Red;">

</div>

</td>

</tr>

</table>

</form>

</body>

</html>

On clicking the button jQuery tries to get the data from a HTML page UnknownPage.html, which does not exist in the server, this will trigger the ajaxError event, the error handling function handles the error and displays the error message in the divErrorLog DIV.

Notice that the ajaxError are common and will be called for all the Ajax requests in the page, we will have to identify and map the error with the request using the settings parameters of the ajaxError event.

jQuery Ajax Error Handling

Handling errors is an important activity while using Ajax, since it will be difficult Ajax requests, the requests will be shared between the Client and the Server side, to successfully debug an error we will have to keep track of both the Client side and the Server side code, hence it becomes more important to track more efficiently while using Ajax.

The syntax for ajaxError event is as follows.

.ajaxError(function(event, jqXHR, ajaxSettings, jsExe))

When an error occurs while handling the Ajax request the function fnErrorHandler will be called.

Event            – The event Object
jqXHR           - The XMLHttpRequest Object
ajaxSettings   - Options used to make the Ajax Request
jsExe           - JavaScript exception.

Related Post