Kenci
Kenci

Reputation: 4882

Action Controller finishes but AJAX success callback is not called?

I have a script that creates a JSON object and sends it to my Action Controller. The ActionController recieves the object and knows how to modelbind it to a ViewModel.

The action controller is very simple and looks like this:

[HttpPost]
        public String SaveNumberMatrix(NumberViewModel model) {
            return "Finished";
        }

The AJAX function:

function saveNumberMatrix(object, actioncontroller) {

    var finished = false;

    $.ajax({
    url: actioncontroller,
    type: 'POST',
    data: JSON.stringify(object),
    dataType: 'json',
    processData: false,
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        alert(data);
        finished = true;
        },   
    });
    alert(finished);
    return finished;
}

I have debugged the Action Controller, and the javascript alerts finished (false) before i step into

"return "Finished";

The sucess callback is never called Where am i doing it wrong?

Upvotes: 0

Views: 4902

Answers (4)

Indeb
Indeb

Reputation: 1

Add async parameter as false (async: false,) then the AJAX method will be called synchronously.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038890

The whole point of AJAX is that it is asynchronous meaning that you can process the results only inside the success callback. The $.ajax method starts an AJAX request to the server and it returns immediately. At this stage the value of finished is still false and you are leaving the function. Much later when the AJAX completes the success callback is executed. It is only inside this callback that you can use the results sent from the server.

When using AJAX you should not organize your javascript code in a sequential and synchronous way.

So it should be like this:

$.ajax({
    url: '/actioncontroller/savenumbermatrix',
    type: 'POST',
    data: JSON.stringify(object),
    dataType: 'json',
    processData: false,
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        // TODO: only here you can use the results of an AJAX call
    }
});

Also I would recommend you to have your controller actions always return action results and not string:

[HttpPost]
public ActionResult SaveNumberMatrix(NumberViewModel model) {
    return Json("Finished");
}

Another issue with your code is that you are indicating dataType: 'json' as response and returning a string Finished from the server which is an invalid JSON.

Upvotes: 4

Yair Nevet
Yair Nevet

Reputation: 13003

It's seems like your ajax request does not reach to the server. please use ajax error function.

error: function(a,b,c){alert(a+b+c)}

and find out the problem

Upvotes: 0

aziz punjani
aziz punjani

Reputation: 25776

You're not getting to the success callback because you're not sending valid json back, you need to send json back as your dataType is json. Hence it's probably throwing an error.

From the jQuery docs:

dataTypeString
Default: Intelligent Guess (xml, json, script, or html)
The type of data that you're expecting back from the server. 

In your case you are specifying json but clearly not sending back json

Upvotes: 0

Related Questions