How to run “success” function in MVC4 Jquery Ajax request?

Question

I am making a simple MVC4 application with C# and jQuery. In this application, when the user presses a button with the id of SaveCheckboxChanges I send two arrays of data to the server. Then the server processes the data and saves it on the DB.

While this is happening, I want the pressed button to change. Currently, when the user clicks the button, the buttons text changes to 'Saving changes' which is good, but then it never changes back.

This happens because the success function that I send in the Ajax request is never being called, only the error function is called even though no errors happen and I get the OK answer.

Controller that receives the request:

[HttpPost]
public ActionResult UpdateCheckBoxes(int[] requiresSetupArray, int[] disabledArray)
{
    //Do operations with the requiresSetupArray and disabledArray Arrays
    DB.SaveChanges();
    return Content("OK");
}

At first i assumed this was happening because the UpdateCheckBoxes method was void and was not returning anything. But now that I changed it to what is above, only the error function is called.

Javascript code being executed:

$("#SaveCheckboxChanges").click(function (event) {
        var button = $("#SaveCheckboxChanges");
        if (!button.hasClass("disabled")) {

            button.attr('value', 'Saving changes');

            var requiresSetupArray = [1, 2];
            var disabledArray = [3, 4];

            $.ajax({
                url: '/Material/UpdateCheckBoxes',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                traditional: true,
                data: JSON.stringify({ requiresSetupArray: requiresSetupArray, disabledArray: disabledArray }),
                success: function (data) {
                    alert("success " +  data);
                    button.attr('value', 'Save Checkbox Changes');
                    button.addClass('disabled');
                },
                error: function () {
                    alert("error");
                }
            });

How do I fix this? Am I forced to return something in the controller's method for the success function to run? If so what should I run?

Answer 1

If you don't expect your method to return anything - don't require JSON as result:

$.ajax({


       url: '/Material/UpdateCheckBoxes',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        //  dataType: 'json', - remove this line.
        traditional: true,
        data: JSON.stringify({ requiresSetupArray: requiresSetupArray, disabledArray: disabledArray }),
        success: function (data) {
            alert("success " +  data);
            button.attr('value', 'Save Checkbox Changes');
            button.addClass('disabled');
        },
        error: function () {
            alert("error");
        }
    });