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 application/json; charset=utf-8 . So you should be good.