NopCommerce + DataTables

binhexoctal

I am trying to use NopCommerce and DataTables and keep getting this error:

jquery.min.js:2 Uncaught TypeError: $(...).dataTable is not a function
at HTMLDocument.<anonymous> (localhost/:2343)
at l (jquery.min.js:2)
at c (jquery.min.js:2)

NopCommerce has a bunch of layers and injections for JS and CSS, not sure how I could use Fiddler to show the problem. I essentially have a basic table with id(tblRandom) in a MVC Razor page and I have this in the cshtml page:

<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css" />

$(document).ready(function () { $('#tblRandom').dataTable(); });

My cshtml page is using a layout page which uses a layout page, etc all the way to the head and root which load up all the CSS/JS into the head and body.

kthorngren

This FAQ provides the answer. Basically you need to use $('#tblRandom').DataTable();. Note the capital D in Datatable.

Kevin

binhexoctal

I tried that already. Same error. I've messed around with this for about 5 hours now trying to get it to work.

jquery.min.js:2 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> ((index):2343)
at l (jquery.min.js:2)
at c (jquery.min.js:2)
(anonymous) @ (index):2343
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
w.readyException @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
_ @ jquery.min.js:2

kthorngren

One common problem is loading jquery.js twice. Make sure its only loaded once. Beyond that its hard to say without seeing it. I would use the browser's developer tools to verify the CDN requests are fetched and properly loaded. Confirm the load order to make sure its correct.

Kevin

binhexoctal

So I commented out the line for jquery 3.3.1 assuming it is being loaded elsewhere leaving the datatables line with the CSS in the cshtml page but now I get this:

Uncaught ReferenceError: jQuery is not defined
at jquery.dataTables.min.js:18
at jquery.dataTables.min.js:18
(index):2340 Uncaught ReferenceError: $ is not defined
at (index):2340

kthorngren

In this example jquery is loaded twice; once before and once after Datatables:
http://live.datatables.net/zazifema/1/edit

If you remove the first one you then get the jQuery is not defined error. Make sure you are loading jquery after Datatables. Did you use the developer tools to see what is loaded and the order? You may see jquery.js twice. However, its possible that its combined into another library.

Do you have other libraries that rely on jQuery and do they work if you remove the jquery.js include you removed above?

Kevin

binhexoctal

Looks like all the js is minified into one file so it is hard for me to see the order unless this is in some place I don't know in dev tools.

binhexoctal

This is in the head.cshtml file before I make any changes...should I be putting it in the head or body?

Html.AppendCssFileParts(string.Format("~/Themes/{0}/Content/css/style.css", themeName));
Html.AppendCssFileParts(ResourceLocation.Head, string.Format("~/Themes/{0}/Content/css/materialdesigniconsSlim.min.css", themeName));
Html.AppendCssFileParts(ResourceLocation.Head, string.Format("~/Themes/{0}/Content/css/js-offcanvas.css", themeName));
Html.AppendCssFileParts(ResourceLocation.Head, "~/content/magnific-popup/magnific-popup.css");
Html.AppendCssFileParts(ResourceLocation.Head, string.Format("~/Themes/{0}/Content/css/animate.min.css", themeName));
Html.AppendCssFileParts(ResourceLocation.Head, "~/content/bootstrap/bootstrap.min.css");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery.magnific-popup.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/public.actions.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/public.search.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/content/bootstrap/bootstrap.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/content/bootstrap/popper.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/public.ajaxcart.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery.countdown.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/public.common.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery.zoom.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery.smooth-scroll.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, string.Format("~/Themes/{0}/Content/js/js-offcanvas.pkgd.min.js", themeName));
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery-migrate-3.0.1.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery-ui-1.12.1.custom/jquery-ui.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery.validate.min.js");
Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery-3.3.1.min.js");

kthorngren

You are loading jquery-3.3.1.min.js last. Since jquery is a requirement for things like bootstrap/bootstrap.min.js it should be loaded before them. I suspect the /jquery-3.3.1.min.js you load in the last line is the second time jQuery is being loaded. My suggestion would be to replace the last line with the jquery.dataTables.min.js and dataTables.bootstrap4.min.js. Also place the datatables.min.css above with the rest of the CSS includes.

Kevin

binhexoctal

I changed: Html.AppendScriptParts(ResourceLocation.Footer, "~/scripts/jquery-3.3.1.min.js"); to Html.AppendScriptParts(ResourceLocation.Head, "~/scripts/jquery-3.3.1.min.js"); and everything worked. If I run into anymore issues, I'll try your last suggestions. Thanks so much for your help.