NopCommerce + DataTables
NopCommerce + DataTables
binhexoctal
Posts: 6Questions: 0Answers: 0
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" />
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.
Replies
This FAQ provides the answer. Basically you need to use
$('#tblRandom').DataTable();. Note the capitalDin Datatable.Kevin
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
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
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
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 definederror. 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
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.
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");
You are loading
jquery-3.3.1.min.jslast. Since jquery is a requirement for things likebootstrap/bootstrap.min.jsit should be loaded before them. I suspect the/jquery-3.3.1.min.jsyou load in the last line is the second time jQuery is being loaded. My suggestion would be to replace the last line with thejquery.dataTables.min.jsanddataTables.bootstrap4.min.js. Also place thedatatables.min.cssabove with the rest of the CSS includes.Kevin
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.