Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How would you handle errors when using jQuery.ajax()?

When using jQuery's ajax method to submit form data, what is the best way to handle errors? This is an example of what a call might look like:

$.ajax({     url: "userCreation.ashx",     data: { u:userName, p:password, e:email },     type: "POST",     beforeSend: function(){disableSubmitButton();},     complete: function(){enableSubmitButton();},     error: function(xhr, statusText, errorThrown){             // Work out what the error was and display the appropriate message         },     success: function(data){             displayUserCreatedMessage();             refreshUserList();         } }); 

The request might fail for a number of reasons, such as duplicate user name, duplicate email address etc, and the ashx is written to throw an exception when this happens.

My problem seems to be that by throwing an exception the ashx causes the statusText and errorThrown to be undefined.

I can get to the XMLHttpRequest.responseText which contains the HTML that makes up the standard .net error page.

I am finding the page title in the responseText and using the title to work out which error was thrown. Although I have a suspicion that this will fall apart when I enable custom error handling pages.

Should I be throwing the errors in the ashx, or should I be returning a status code as part of the data returned by the call to userCreation.ashx, then using this to decide what action to take?
How do you handle these situations?

like image 944
AidenMontgomery Avatar asked Aug 26 '08 16:08

AidenMontgomery


People also ask

How do you handle errors in AJAX?

The best way to bubble that error from the server side (using php) to the client side is to send a header through the Ajax request somewhere in the 400's (which is always associated with errors). Once the Ajax request receives this it will trigger your error function.

What is the correct approach to handle AJAX error when AJAX request fails?

To handle jQuery AJAX error. The ajaxError( callback ) method attaches a function to be executed whenever an AJAX request fails.

What is AJAX error function?

The ajaxError() method specifies a function to be run when an AJAX request fails. Note: As of jQuery version 1.8, this method should only be attached to document.

What happens if an AJAX request made using jQuery fails?

Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the . ajaxError() method are executed at this time. Note: This handler is not called for cross-domain script and cross-domain JSONP requests.


2 Answers

For debugging, I usually just create an element (in the case below: <div id="error"></div>) on the page and write the XmlHttpRequest to it:

error: function (XMLHttpRequest, textStatus, errorThrown) {     $("#error").html(XMLHttpRequest.status + "\n<hr />" + XMLHttpRequest.responseText); } 

Then you can see the types of errors that are occurring and capture them correctly:

if (XMLHttpRequest.status === 404) // display some page not found error if (XMLHttpRequest.status === 500) // display some server error 

In your ashx, can you throw a new exception (e.g "Invalid User" etc.) and then just parse that out of the XMLHttpRequest.responseText? For me when I get an error the XMLHttpRequest.responseText isn't the standard Asp.Net error page, it's a JSON object containing the error like this:

{ "Message":"Index was out of range. Must be non-negative and less than the size of the collection.\r\n Parameter name: index", "StackTrace":" at System.ThrowHelper.ThrowArgumentOutOfRangeException(ExceptionArgument argument, ExceptionResource resource)\r\n  at etc...", "ExceptionType":"System.ArgumentOutOfRangeException" } 

Edit: This could be because the function I'm calling is marked with these attributes:

<WebMethod()> _ <ScriptMethod()> _ 
like image 157
travis Avatar answered Sep 20 '22 22:09

travis


Should I be throwing the errors in the ashx, or should I be returning a status code as part of the data returned by the call to userCreation.ashx, then using this to decide what action to take? How do you handle these situations?

Personally, if possible, I would prefer to handle this on the server side and work up a message to the user there. This works very well in a scenario where you only want to display a message to the user telling them what happened (validation message, essentially).

However, if you want to perform an action based on what happened on the server, you may want to use a status code and write some javascript to perform various actions based on that status code.

like image 27
Ian Robinson Avatar answered Sep 21 '22 22:09

Ian Robinson