Show proper error messages with jQuery AJAX

Question

Currently if I have an error with an ajax request such as submitting a form (I'm using ASP.NET MVC 3) it will show something like 'Internal Server Error'.

But if I do the submit without using Ajax then .net will show the actual server error.

Any ideas on how I could perhaps get the error to show? So my users can report the problem instead of only being able to say 'internal server error'

Thanks

Answer 1

Although I wouldnt recommend showing the user an error number with the actual response error message this is how you can do this by adding the error callback

error: function(xhr,err){
    alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
    alert("responseText: "+xhr.responseText);
}

xhr is XmlHttpRequest.

readyState values are 1:loading, 2:loaded, 3:interactive, 4:complete.

status is the HTTP status number, i.e. 404: not found, 500: server error, 200: ok.

responseText is the response from the server - this could be text or JSON from the web service, or HTML from the web server.

Answer 2

This code will replace the current page's contents with the error that came back from the ajax request.

jQuery(document).ajaxError(function (event, request, settings) {
    if (request.status === 500) {
        $(document.body).html(request.responseText);
    } else if (request.status === 401) {
        // redirect to login, 401 means session is expired.
        window.location.href = "login page url";
    }
});