How to Catch An Ajax error while using Jquery UI tabs along with Custom Error handler

Question

I am using Jquery UI tabs in my asp.net mvc web application. I have my tabs working good.

But, the problem is when ever an ajax errors happens, it should be caught and JSON response should be thrown back.

I am using an CustomError handler over riding MVC HandleError Attribute as follows:

public class CustomHandleErrorAttribute : HandleErrorAttribute
    {
        public override void OnException(ExceptionContext filterContext)
        {
            if (filterContext.ExceptionHandled || !filterContext.HttpContext.IsCustomErrorEnabled)
            {
                return;
            }

            if (new HttpException(null, filterContext.Exception).GetHttpCode() != 500)
            {
                return;
            }

            if (!ExceptionType.IsInstanceOfType(filterContext.Exception))
            {
                return;
            }

            // if the request is AJAX return JSON else view.
            if (filterContext.HttpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest")
            {
                filterContext.Result = new JsonResult
                {
                    JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                    Data = new
                    {
                        error = true,
                        message = filterContext.Exception.Message
                    }
                };
            }
            else
            {
                var controllerName = (string)filterContext.RouteData.Values["controller"];
                var actionName = (string)filterContext.RouteData.Values["action"];
                var model = new HandleErrorInfo(filterContext.Exception, controllerName, actionName);

                filterContext.Result = new ViewResult
                {
                    ViewName = View,
                    MasterName = Master,
                    ViewData = new ViewDataDictionary<HandleErrorInfo>(model),
                    TempData = filterContext.Controller.TempData
                };
            }
            filterContext.ExceptionHandled = true;
            filterContext.HttpContext.Response.Clear();
            filterContext.HttpContext.Response.StatusCode = 500;
            filterContext.HttpContext.Response.TrySkipIisCustomErrors = true;
        }
    }

So, if the error occurs and it is an ajax request , then the above method will throw the JSON response.

But,I am struggling to find out how to catch that JSON respnse and show it on Client Side.

Please help..I tried using ajaxoptions with UI Tabs as follows:

 $(document).ready(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    ui.oldPanel.empty();
                },
                ajaxOptions: { success: Success, error: Failure }
            });
            $('#tabs').css('display', 'block');
            $(function () {
                $(this).ajaxStart(function () {
                    $("#ajaxLoading").show();
                });
                $(this).ajaxStop(function () {
                    $("#ajaxLoading").hide();
                });
            });
        });

        function Success(data) {
            alert("Successfully loaded the tabs");
        }

        function Failure() {
            alert("Some thing wrong had happened");
        }

please help..on how to recieve that erronoeous JSON response and show an appropraite alert to the end user..

Answer 1

I found the solution as this:

$.ajaxSetup({
    type: "GET",
    cache: false,
    error: function (e) {
        var Error = e.responseText;
        var ErrorCode= xx;
        alert("Sorry, An Error has been occured while processing your request " + Error);
    }
});

I have used ajaxSetup() to receive the response from Server Side.

Hope this helps...