I am currently implementing DataTables and cannot debug this issue I am having. I am trying to use ajax.reload(), and I get Invalid JSON Response. Included below is my code for loading data, which is called after create/update.
function loadData() {
$.ajax({
url: "/Home/List",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += '<td>' + item.itemName + '</td>';
html += '<td>' + item.itemType + '</td>';
html += '<td>' + item.itemPurchased + '</td>';
html += '<td>' + item.itemSKU + '</td>';
html += '<td>' + item.itemSize + '</td>';
html += '<td>' + item.itemColor + '</td>';
html += '<td>' + "$"+ item.itemPrice + '</td>';
html += '<td>
<a href="#" onclick="return getbyID(' + item.itemID + ')">Edit</a>
| <a href="#" onclick="Delete(' + item.itemID + ')">Delete</a>
| <a href="#" onclick="return getsell(' + item.itemID + ')">Sell</a>
</td>';
html += '</tr>';
});
$('.tbody').html(html);
$('#myTBODY').DataTable().ajax.reload();
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
I attempted to check the Network tab on the Chrome Console, and this is what "List" returned:
[
{
"itemID":76,
"itemName":"Yeezy Boost 350",
"itemType":"Shoe",
"itemPurchased":"2021-02-03",
"itemSKU":"F19961",
"itemSize":"5",
"itemPrice":220,
"itemColor":"Blue"
},
{
"itemID":82,
"itemName":"Yeezy Boost 350",
"itemType":"Shoe",
"itemPurchased":"2021-02-09",
"itemSKU":"F19962",
"itemSize":"5",
"itemPrice":220,
"itemColor":"Red"
},
{
"itemID":83,
"itemName":"Yeezy Boost 350",
"itemType":"Shoe",
"itemPurchased":"2021-02-09",
"itemSKU":"F19962",
"itemSize":"5",
"itemPrice":220,
"itemColor":"Red"
},
{
"itemID":84,
"itemName":"Yeezy Boost 350",
"itemType":"Shoe",
"itemPurchased":"2021-02-10",
"itemSKU":"F19961",
"itemSize":"5",
"itemPrice":220,
"itemColor":"Black"
},
{
"itemID":89,
"itemName":"Yeezy Boost 350",
"itemType":"Shoe",
"itemPurchased":"2021-02-09",
"itemSKU":"F19961",
"itemSize":"5",
"itemPrice":220,
"itemColor":"Black"
},
{
"itemID":90,
"itemName":"Yeezy Boost 350",
"itemType":"Shoe",
"itemPurchased":"2021-02-09",
"itemSKU":"F19961",
"itemSize":"5",
"itemPrice":220,
"itemColor":"Black"
},
{
"itemID":91,
"itemName":"Yeezy Boost 350",
"itemType":"Shoe",
"itemPurchased":"2021-02-09",
"itemSKU":"F19961",
"itemSize":"5",
"itemPrice":220,
"itemColor":"Black"
}
]
I know that this is a valid JSON, but I just cannot grasp what it is I am doing wrong. I have tried everything on the official DataTables site, and am just stumped. Please let me know if I need to include something else (my List code, my html, etc), and I do apologize if I am not posting this properly.
Edit: Home Controller
public JsonResult List() // lists all inventory
{
return Json(invDB.ListAll(), JsonRequestBehavior.AllowGet);
}
Edit: ListAll function
public List<Inventory> ListAll()
{
List<Inventory> lst = new List<Inventory>();
using (SqlConnection con = new SqlConnection(cd))
{
con.Open();
SqlCommand com = new SqlCommand("SelectItem", con);
com.CommandType = CommandType.StoredProcedure;
SqlDataReader rdr = com.ExecuteReader();
while (rdr.Read())
{
lst.Add(new Inventory
{
itemID = Convert.ToInt32(rdr["itemID"]),
itemName = rdr["itemName"].ToString(),
itemType = rdr["itemType"].ToString(),
itemPurchased = rdr["itemPurchased"].ToString(),
itemSKU = rdr["itemSKU"].ToString(),
itemSize = rdr["itemSize"].ToString(),
itemColor = rdr["itemColor"].ToString(),
itemPrice = Convert.ToDouble(rdr["itemPrice"])
});
}
return lst;
}
}
This is an image of my Network, the "List" returns what I sent above (the JSON I know is valid). I cannot find anything in network that explains the reasoning for invalid data.
