Uncaught TypeError: Cannot read property 'length' of undefined
Uncaught TypeError: Cannot read property 'length' of undefined
webman
Posts: 25Questions: 1Answers: 0
****Any suggestions on how to fix this issue?**
Uncaught TypeError: Cannot read property 'length' of undefined**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>PCE Install Fee Update</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.2/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.0.2/css/dataTables.dateTime.min.css">
<link rel="stylesheet" type="text/css" href="~/css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="~/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="~/resources/demo.css">
<link rel="stylesheet" type="text/css" href="~/css/editor.dataTables.min.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.2/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.0.2/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" language="javascript" src="~/js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="~/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="~/resources/demo.js"></script>
<script type="text/javascript" language="javascript" src="~/resources/editor-demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: "/InstallFees/GetData",
table: "#installfee",
fields: [{
label: "Install Fee ID:",
name: "InstallFeeID" //2
}, {
label: "Installer Code:",
name: "InstallerCode"
}, {
label: "Town Name:",
name: "TownName"
}, {
label: "Service Code:",
name: "ServiceCode"
}, {
label: "Price Per Foot:",
name: "PricePerFoot"
}, {
label: "Piping Fee:",
name: "PipingFee"
}, {
label: "Price Per Foot2:",
name: "PricePerFoot2"
}, {
label: "Price Per Foot3:",
name: "PricePerFoot3"
}, {
label: "Lower Limit2:",
name: "LowerLimit2"
}, {
label: "Lower Limit3:",
name: "LowerLimit3",
}, {
label: "Two Inch Equivalent Fee:",
name: "TwoInchEquivalentFee"
}, {
label: "Main Line:",
name: "MainLine"
}, {
label: "id:",
name: "id"
}
]
});
// Activate an inline edit on click of a table cell
$('#installfee').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});
$('#installfee').DataTable({
dom: "Bfrtip",
ajax: "/InstallFees/GetData",
order: [[1, 'asc']],
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "InstallFeeID" },
{ data: "InstallerCode" },
{ data: "TownName" },
{ data: "ServiceCode" },
{ data: "PricePerFoot" },
{ data: "PipingFee" },
{ data: "PricePerFoot2" },
{ data: "PricePerFoot3" },
{ data: "LowerLimit2" },
{ data: "LowerLimit3" },
{ data: "TwoInchEquivalentFee" },
{ data: "MainLine" },
{ data: "id" , render: $.fn.dataTable.render.number(',', '.', 2, '$') }
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
});
</script>
</head>
<body class="dt-example net">
<div class="container">
<div class="demo-html">
<table id="installfee" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Install Fee ID</th>
<th>Installer Code</th>
<th>Town Name</th>
<th>Service Code</th>
<th>Price Per Foot</th>
<th>Piping Fee</th>
<th>PricePer Foot2</th>
<th>PricePer Foot3</th>
<th>LowerLimit2</th>
<th>LowerLimit3</th>
<th>2" Equiv Fee</th>
<th>Main Line</th>
<th>id</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Replies
Check you JSON response and these threads:
https://datatables.net/forums/discussion/56615/uncaught-typeerror-cannot-read-property-length-of-undefined
https://datatables.net/forums/discussion/63043/uncaught-typeerror-cannot-read-property-length-of-undefined
Also please use Markdown formatting for your code.
Kevin
Cant figure what wrong with my columns this looks right.
records coming back from my connection
That doesn't look like valid JSON - it looks like an array within an object without a key, which isn't valid. As Kevin said, you can validate your JSON on external sites.
Colin
Is this supported in ASP.Net Core 3.1
All i get back from network logs is the following, an empty response but in visual studio I have data. Like I displayed above
http://localhost:54081/InstallFees/GetData?_=1616501802344
{}
One project in 2.1 works perfect but other project in 3.1 does not
Yes, Editor works with .NET Core 3.1. Are you transitioning a 2.x app to 3.1? If so, you need to make sure you register NewtonsoftJson - this is what we have in our demo's
Startup.cs:Allan
Allan this is what I was missing, go this to work now!
Thank you