jQuery AJAX always executing error: {}

Question

I'm working on a webapplication, ASP.Net MVC 4.0 with entityframework 6.0, trying to update database as per user selection. Data is sent to controller's action using jQuery AJAX. Below given is C# code to update entity which in turn updates database.

public void modidyProduct(Productdetail prodData)  
{  
    try  
    {  
        using (SampleTrialEntities entity = new SampleTrialEntities())  
        {  
            var data = entity.Productdetails.Where(p=>p.ProductID == prodData.ProductID).FirstOrDefault<Productdetail>();  
            data.ProductName = prodData.ProductName;  
            data.ProductNumber = prodData.ProductNumber;  
            data.CategoryName = prodData.CategoryName;  
            data.ModelName = prodData.ModelName;  
            entity.Entry(data).State = System.Data.Entity.EntityState.Modified;  
            entity.SaveChanges();  
        }  
    }  
    catch (Exception)  
    {}  
}

And here's jQuery AJAX call for that controller action method.

function updateProduct() {  
        var productData = {  
            ProductName: $('#prodName').val().trim(),  
            ProductNumber: $('#prodNum').val().trim(),  
            CategoryName: $('#ctgryName :selected').text(),  
            ModelName: $('#mdlName :selected').text(),  
            ProductID: atob($('#editProductId').val())  
        };  
        debugger;  
        $('#divLoader').show();  
        $.ajax({  
            url: '@Url.Action("modidyProduct", "Home")',  
            data: JSON.stringify(productData),  
            type: 'POST',  
            dataType: 'json',  
            contentType: 'application/json;charset=utf-8',  
            success: function (jqXHR) {  
                //Below line will destroy DataTable - tblProducts. So that we could bind table again. next line - loadData();  
                $('#tblProducts').DataTable().destroy();  
                $('#divLoader').hide();  
                loadData();  
                $('#addModal').modal('hide');  
                $('#editProductId').val('');  
            },  
            error: function (msg) {  
                debugger;  
                $('#editProductId').val('');  
                $('#divLoader').hide();  
                alert(msg);  
                alert("What's going wrong ?");  
                //alert(jqXHR.responseText);  
            }  
        });  
    }

After executing jQuery AJAX method & controllers action, successfully updates the record in database. Response statuscode - 200 & Status - OK is returned. But only error: { }, code block is executed every time in AJAX method. Debugging screen capture with status-OK; statuscode - 200

Answer 1

This part of your $.ajax method call

dataType: 'json', 

It tells jQuery that, the ajax call code is expecting a valid JSON response back but currently your server method's return type is void. That means it won't return anything and the $.ajax method is trying to parse the response (assuming it is a valid JSON), and hence getting the typical "parsererror"

When the datatype is json and the response is received from the server, the data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected.

The solution is to simply remove the dataType property in the call.

$.ajax({
        url: '@Url.Action("modidyProduct", "Home")',
        data: JSON.stringify(productData),
        type: 'POST',
        contentType: 'application/json;charset=utf-8'
    }).done(function() {
        console.log('Success');
    })
    .fail(function(e, s, t) {
        console.log('Failed');
    });

Or you can update your server action method to return a json response.

[HttpPost]
public ActionResult ModidyProduct(Productdetail prodData)
{
    try
    {
        //to do : Save  
    }
    catch (Exception ex)
    {
        //to do : Log the exception
        return Json(new { status = "error", message=ex.Message });
    }
    return Json(new { status="success"});
}

Now in your client side code, you can check the json response to see if the transaction was successful

$.ajax({
        url: '@Url.Action("ModidyProduct", "Home")',
        data: JSON.stringify(productData),
        type: 'POST',
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
}).done(function (res) {
    if (res.status === 'success') {
        alert('success');
    } else {
        alert(res.message);
    }
        console.log('Success');
 }).fail(function(e, s, t) {
        console.log('Failed');
 });

You do not need to necessarily specify the dataType property value. If nothing is specified jQuery will try to infer it based on the mime type of the response coming back, in this case, the response content type will be application/json; charset=utf-8. So you should be good.