Javascript runtime error - object doesn't support property or method 'DataTable'
I'm working with ASP.Net MVC and Bootstrap, which I'm fairly new to, and I'm trying to use DataTables on a page I'm working on.
I'm getting the above error on a page with which I'm trying to use DataTables. I've seen the reference to this error in the DataTables FAQ, but it doesn't seem to apply (I've tried using both "DataTable()" (which it recommended) and "dataTable()".
I've found a number of people reporting the same error on google, and have tried their solutions without any success.
I've tried looking at the source for a number of DataTables examples, and am not seeing anything significantly different. I've tried moving the script imports to the head instead of the body (where the ASP.Net MVC template puts them), but that didn't help.
At this point I suspect I'm doing something forehead slappingly simple wrong in my HTML, or I've not imported something properly into the project (I have the standard MVC imports that visual studio brings in to a new project, and I've used nuget to pull in the DataTables package - the referenced DataTables files all exist in the solution).
The HTML, as it is rendered when the error occurs is shown below. I've tried this using IE11 and the latest version of Chrome - Chrome appears to swallow the error, but doesn't format the table using DataTables. IE causes visual studio to break execution with the error.
Here's the HTML - I've removed all but a single row from the table and anonymised some strings, but other than that this is the HTML being generated - can anyone point me in the right direction? Apologies if I've missed something obvious I could have done myself - still quite new to this sort of development
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Test</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="Ff0UsQuoy8REoB06X9xf2I9jPyOLtk4Zt0MpV_TXcNQH92nZqfEWckTr5ameIPT2MZTwgzNkBv5AMJQG3XlZIxQ34DMhE73k141n7RGjyqtzxPj0T-54wwSAZ1IyNdb0eFumyB4egq6ZPotYae5M5Q2" /> <ul class="nav navbar-nav navbar-right">
<li>
<a href="/Manage" title="Manage">Hello Kev!</a>
</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Index</h2>
<h4>Pending Deliveries (POD not uploaded)</h4>
<table class="table" id="jobs">
<tr>
<th>Company</th>
<th>Job</th>
<th>Deliver To</th>
<th>Assigned to you</th>
<th>Driver/Vehicle</th>
<th></th>
</tr>
<tr>
<td>
Test
</td>
<td>
DR53941
</td>
<td>
Dublin
</td>
<td>
04/05/2005 15:45:00
</td>
<td>
</td>
<td>
<a href="/HaulierHome/UploadPOD/00ad79c9-cff5-4276-a1b8-bd16efdc2cb5">Upload POD</a>
<a href="/HaulierHome/Assign/00ad79c9-cff5-4276-a1b8-bd16efdc2cb5">Assign</a>
</td>
</tr>
</table>
<hr />
<footer>
<p>© 2015 - Test</p>
</footer>
</div>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<link href="/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/DataTables/jQuery.dataTables.min.js"></script>
<script>
$(document).ready(function () { $('#jobs').DataTable(); });
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"d6cc4bfd70744a668b895798732a7b1b"}
</script>
<script type="text/javascript" src="https://localhost:44399/db2a5633ea9f42c996d29ff040a87ecb/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>The full error I get is 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'DataTable'. The relevant line in the HTML is the $(document).ready script line near the bottom
Venkat.R2 Answers
Not sure why it helped, but I've solved this. I removed the DataTables references from the script section and added the following to the BundleConfig file
bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/DataTables/jQuery.dataTables.min.js"))
bundles.Add(New StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/DataTables/css/jquery.dataTables.min.css"))
In case anyone else is getting the same error it might be worth giving this a try?
Kevin O'Donovancorrect by adding below code in BundleConfig the below error went away
"Javascript runtime error - object doesn't support property or method 'DataTable'"
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/DataTables/jQuery.dataTables.min.js"))
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/DataTables/css/jquery.dataTables.min.css"))
The DataTable (grid) will be displayed with sorting,Fliter and paging option.
user10965808
Harshith RaiUser contributions licensed under CC BY-SA 3.0