Success and Error functions not firing in Ajax cal

Question

Below is an Ajax call I'm using to determine which menu options to show to users (I know it's a flawed method, just up against a time crunch for a demo). When the page loads, I can step through the controller method in Visual Studio so I know it's hitting the controller and sending back the right information.

Looking at Chrome's Network console I can also see that the browser received the right response. However, neither the console.log or the alert are firing. Nothing in the success or error methods is executed either. Does anyone see what's going wrong?

View

    $(document).ready(function ($) {
        //Determine which links to show in navbar
        window.onload = function () {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("CheckSecurity","Home")',
                dataType: 'json',
                succcess: function (data) {
                    console.log(data);
                    alert(data);
                    if (data == "admin") { $('#adminLink').show(); }
                    else if (data == "IT") { $('#ITLink').show(); }
                    else if (data == "viewer") { $('#viewerLink').show(); }
                    else if (data == "modifier") { $('#modifierLink').show(); }
                },
                error: function (data) {
                    alert("error");
                }
            });
        };

Controller

    [HttpGet]
    public JsonResult CheckSecurity()
    {
        if (Security.IsAdmin(User)) return Json("admin", JsonRequestBehavior.AllowGet);
        if (Security.IsItSupport(User)) return Json("IT", JsonRequestBehavior.AllowGet);
        if (Security.IsViewer(User)) return Json("viewer", JsonRequestBehavior.AllowGet);
        if (Security.IsModifier(User)) return Json("modifier", JsonRequestBehavior.AllowGet);

        return Json("NA", JsonRequestBehavior.AllowGet);
    }

Here are a couple screen shots of the Network and regular console in Chrome. Bother are from after I've stepped through the controller method and the program has returned a value back to the browser.

Network Console

Standard Console

Answer 1

It is success instead of succcess

NealR

Deprecation Notice:

The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks will be deprecated in jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Check the done, fail and always callbacks below.

$.ajax({
    url: 'Your Url',
    data: JSON.stringify(Parameter list),
    type: 'POST',
    contentType: 'application/json, charset=utf-8',
    dataType: 'json',
    beforeSend: function (xhr, opts) {
    }
}).done(function (data) {
    debugger;
}).fail(function (data) {
    debugger;
}).always(function(data) { 
    alert("complete"); 
});

.ajax().always(function(a, textStatus, b){});

Replaces method .complete() which was deprecated in jQuery 1.8. In response to successful transaction, arguments are same as .done() (ie. a = data, b = jqXHR) and for failed transactions the arguments are same as .fail() (ie. a = jqXHR, b = errorThrown). This is an alternative construct for the complete callback function above. Refer to deferred.always() for implementation details.

$.ajax({
    url: 'Your Url',
    data: JSON.stringify(Parameter list),
    type: 'POST',
    contentType: 'application/json, charset=utf-8',
    dataType: 'json',
    beforeSend: function (xhr, opts) {
    }
}).always(function(data) { 
    alert("complete"); 
});

.ajax().done(function(data, textStatus, jqXHR){});

Replaces method .success() which was deprecated in jQuery 1.8. This is an alternative construct for the success callback function above. Refer to deferred.done() for implementation details.

$.ajax({
    url: 'Your Url',
    data: JSON.stringify(Parameter list),
    type: 'POST',
    contentType: 'application/json, charset=utf-8',
    dataType: 'json',
    beforeSend: function (xhr, opts) {
    }
}).done(function (data) {
    debugger;
});

.ajax().fail(function(jqXHR, textStatus, errorThrown){});

Replaces method .error() which was deprecated in jQuery 1.8. This is an alternative construct for the complete callback function above. Refer to deferred.fail() for implementation details.

$.ajax({
    url: 'Your Url',
    data: JSON.stringify(Parameter list),
    type: 'POST',
    contentType: 'application/json, charset=utf-8',
    dataType: 'json',
    beforeSend: function (xhr, opts) {
    }
}).fail(function (data) {
    debugger;
});

Check here for more details

Check here for the documentation details

Answer 2

There is an extra c in your

succcess:

So the response is a 200 request , but because you have no mapping for success defined, it is just never logged