jQuery AJAX always executing error: {}

Hello everyone,

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();
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);
}
});
}

function loadData() {
$('#divLoader').show();
$.ajax({
url: '@Url.Action("getProductDetails", "Home")',
type: 'GET',
dataType: 'json',
success: function (data) {
$('#tblProducts').DataTable({
data: data,
columns: [
{ 'data': 'ProductName' },
{ 'data': 'ProductNumber' },
{ 'data': 'CategoryName' },
{ 'data': 'ModelName' },
{
'data': 'ProductID', "orderable": false, "render": function (data) {
return ' + data + ',this);">';
}
}]
});
$('#divLoader').hide();
},
error: function () {
alert('Server couldn`t process request');
}
});
}

After executing jQuery AJAX method & controllers action, successfully updates the record in datbase. Response statuscode - 200 & Status - OK is returned. But only error: { }, code block is executed everytime in AJAX method.

It would be really helpful, if you guys post your comment/ response. Thanks in advance.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bryian Tan8y ago
Accepted answer
The modidyProduct action should return a JSON response to the client instead of empty response (void)

I would suggest to change this line
public void modidyProduct(Productdetail prodData)
To
public ActionResult modidyProduct(Productdetail prodData)
Then, if update is successful, return
return Json("Success", JsonRequestBehavior.AllowGet);
L A8y ago
Thanks Bryian Tan, for your response.
I found below the explaination on internet.

In jQuey $.ajax method call,
dataType: 'json',
tells jQuery that, the ajax call code is expecting a valid JSON response back but currently controller's action 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".