Jquery Ajax's success function not called

Question

I am calling a MVC controller method from Jquery ajax.

$(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "/Customer/GetDetails",
            contentType: "application/json; charset=utf-8",
            async: false,
            cache: false,
            success: function (data) {
                $.each(data, function (index, value) {
                    alert(value);
                });
            }
        });
    });

I am having an entity called Customer .

Controller Method fetches record from DB and stored as List of Customer and am returning that list in JsonResult type.

public JsonResult GetDetails()
{
    CustomerDAL customer = new CustomerDAL();
    IList<Customer> custList = customer.GetDetail();
    return Json(custList);
}

But my ajax's success function is not at all called here.

Answer 1

You don't have to specify the content-type because it set the type in which the server is expecting the data, you are not sending any so no need to set it explicitly, secondly set the dataType to json which is the format in which the client is expecting data from the server. But I really doubt that it could be the cause of any error.

Add an error callback to make sure something went wrong on the way back like

try

$.ajax({
            type: "POST",
            url: "/Customer/GetDetails",
            dataType:'json',
            async: false,//WHY??
            cache: false,
            success: function (data) {
                 alert("success");                
            },
            error:function(){
              alert("something went wrong");
            }
        });

Use

1. Firebug or chrome tools to examine the ajax request and set what is the status code returned.

2. Place a breakpoint inside the Controller to see if the ActionResult is hit when the call is made.

EDIT

mark your JsonResult with the HttpPost annotation like

[HttpPost]
public JsonResult GetDetails()
        {
            CustomerDAL customer = new CustomerDAL();
            IList<Customer> custList = customer.GetDetail();
            return Json(custList);
        }

Answer 2

Replace your line

 contentType: "application/json; charset=utf-8",

with this one

contentType: "application/json",

and add datatype

datatype: 'json'

Answer 3

Got into that today. The problem, that the "success" event wasn't fired was, that there actually wasn't a "success" from the jQuery perspective: the json code returned by the server was malformed! So: double check your json format, ie with JSON Lint at http://zaach.github.com/jsonlint/ or something else. The ajax function is very "tolerant" against any false/erroneous settings, but malformed json code is definitively an error. As long as the error event gets triggered, there IS an error.

Answer 4

You have an object list as List in ajax-success function.

to parse it try this

$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "/Customer/GetDetails", // or better way '@Url.Action("GetDetails", "Customer")'
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            $.each(data, function (index, customer) {
                alert(customer.id, customer.name, customer.surname);
            });
        }
    });
});

controller

public JsonResult GetDetails()
{
    CustomerDAL customer = new CustomerDAL();
    IList<Customer> custList = customer.GetDetail();

    return Json(custList);
}

for example assume that your CustomerDAL model

class CustomerDAL
{ 
    public int id { get; set; }
    public string name { get; set; }
    public string surname { get; set; }
}

Modify alert message for your CustomerDAL model. I dont know what properties in your model.

Answer 5

Your code:

return Json(custList);

Change it to:

return Json(new SelectList(custList));