jQuery ajax call to mvc Action doesn't fire success/error

Question

Trying to create a switch for a global session variable the ajax call never returns "success" nor "error".

The actions are called and the Session keys are set, but the success/error functions are never fired.

It is weird because I use the same structure with other calls to replace divs and it works.

Javascript doesn't work

function SwitchHelpMode() {
    debugger;
    var helpmode = true;
    $.ajax({
        type: 'GET',
        url: '/Session/GetSessionKey',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: { key: "helpmode" },
        sucess: function (data) {
            alert(data);
            //debugger;
            //var ok = data.success;
            //if (ok) {
            //    var algo = data.value;
            //    alert(algo);
            //    helpmode = !algo;
            //}
        },
        error: function (xhr) {
            //debugger;
            alert(xhr);
            alert('ERROR::SetSessionKey!' + xhr.responseText);
        }
    });
    helpmode = false;
    $.ajax({
        type: 'GET',
        url: '/Session/SetSessionKey',
        data: { key: "helpmode", value: helpmode },
        sucess: function (data) {
            alert(data);
        },
        error: function (xhr) {
            debugger;
            alert('ERROR::SetSessionKey!' + xhr.responseText);
        }
    });
}

Controller

public ActionResult SetSessionKey(string key, string value)
{
    Session[key] = value;

    return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}

public ActionResult GetSessionKey(string key)
{

    if(Session[key] != null)
    {
        var value = Session[key];

        return Json(new { success = true, data = value }, JsonRequestBehavior.AllowGet);
    }
    else
    {
        return Json(new { success = false }, JsonRequestBehavior.AllowGet);
    }
}

Javascript works

function FilterInfoByFlightsCallback(values) {
    //debugger;
    var data = JSON.stringify(values);
    var url = '/Campaign/FilterInfoByFlights';
    $.ajax({
        type: 'GET',
        url: url,
        data: { filter: data },
        success: function (result) {
            $('#infoList').html(result);
        },
        error: function (result) {
            // handle errors
            location.href = "/MindMonitor/"
        }
    });
}

Responses from inspector

http://localhost:50518/Session/GetSessionKey?key=helpmode
{"success":true,"data":"false"}
http://localhost:50518/Session/SetSessionKey?key=helpmode&value=false
{"success":true}

HTTP/1.1 200 OK

Cache-Control: private

Content-Type: application/json; charset=utf-8

Server: Microsoft-IIS/8.0

X-AspNetMvc-Version: 5.2

X-AspNet-Version: 4.0.30319

X-SourceFiles: =?UTF-8?B?
UzpcVlNTb3VyY2VcUHJvamVrdGVcTU1JXGJmdWVudGVzXE1NSVxNaW5kc2hhcmUuTU1JXE1NSVxTZXNzaW9uXEdldFNlc3Npb25LZXk=?=

Persistent-Auth: true

X-Powered-By: ASP.NET

WWW-Authenticate: Negotiate oRswGaADCgEAoxIEEAEAAABDh+CIwTbjqQAAAAA=
Date: Tue, 07 Jul 2015 12:45:03 GMT

Content-Length: 31

---

HTTP/1.1 200 OK

Cache-Control: private

Content-Type: application/json; charset=utf-8

Server: Microsoft-IIS/8.0

X-AspNetMvc-Version: 5.2

X-AspNet-Version: 4.0.30319

X-SourceFiles: =?UTF-8?B?
UzpcVlNTb3VyY2VcUHJvamVrdGVcTU1JXGJmdWVudGVzXE1NSVxNaW5kc2hhcmUuTU1JXE1NSVxTZXNzaW9uXFNldFNlc3Npb25LZXk=?=

Persistent-Auth: true

X-Powered-By: ASP.NET

WWW-Authenticate: Negotiate oRswGaADCgEAoxIEEAEAAABDh+CIwTbjqQAAAAA=
Date: Tue, 07 Jul 2015 12:45:03 GMT

Content-Length: 16

Any idea?

Answer 1

There is no extra c in - sucess: function (data) { because of this even though the response from server would be 200 OK but it will not fire traditional success because it is not able to find one.

It should be - success: function (data) {

Answer 2

AJAX can be difficult to troubleshoot if you don't have a lot of experience with it. The Developer Tools (or FireBug) available for all modern browsers are your friend. They make it much easier to see/understand what the server is returning as a response.

Since the request is using Ajax, the browser won't render any error pages that are returned.

Using Chrome (the other tools are similar and usually opened with CTRL + SHIFT + I or F12):

Open the Developer Tools pane with (CTRL + SHIFT + I).
Click the Network tab.
Click your page element to fire the click handler and send the Ajax request.
Find and click the network request in the Network tab (bottom-left).
The pane next to the network request has Tabs for 'Headers', 'Preview' and 'Response'.

Headers will show you the contents of the request (what got sent to the server).

Response will show you the content of the servers response. This might be JSON for a successful request or it might be HTML source for an error page if an error occured.

The Preview tab will render the servers Response (if possible). This is especially helpful if you receive an error response/page from the server since you won't have to wade through the raw HTML to find the error details.

If your AJAX call is failing, and your server returns a 500 error, you can always check your server logs or look at the Network > Preview tab to see the error detail that is returned. You can troubleshoot the error just as you would any traditional server response.