DataTables not working in Metronic Laravel
I'm trying to implement the DataTables example at https://preview.keenthemes.com/metronic8/demo1/documentation/general/datatables/server-side.html into my project. It's not working.
Here are my steps:
1) Added the HTML code from the example into my Blade file.
2) Added the DataTables JS and CSS files.
2) Added the JS code from the example into my page specific JS file at /resources/assets/extended/js/custom/admin/admin.js
I get a "ReferenceError: DataTables is not defined" error.
When I click "view page source", I see all of the required files added.
<script src="https://devsite.local/custom/plugins/global/plugins.bundle.js"></script>
<script src="https://devsite.local/custom/js/scripts.bundle.js"></script>
<script src="https://devsite.local/custom/js/custom/widgets.js"></script>
<script src="https://assetcaster.local/custom/plugins/custom/datatables/datatables.bundle.js"></script>
<script src="https://devsite.local/custom/js/custom/admin/admin.js"></script>
Clicking on the admin.js file to view the source code gives me a massive file where Webpack has added jQuery to it, even though jQuery was already included in plugins.bundle.js
I can't decipher what's going on, as the JS code in Metronic is a huge mess. My questions are:
1) Why is jQuery being added to my custom admin.js script.
2) How do I just get my custom JS scripts to be pushed into the public directory without being modified by Webpack?
3) Why am I getting the "DataTables is not defined" error when DataTables.js is clearly included before my custom script. I assume it's because jQuery was added a second time, but I don't know for sure.
Replies (11)
Hi Scott,
mix.js() function build the js wrapped by webpack codes.
In the webpack.mix.js file, could you please change the below code? mix.js to mix.scripts
mix.js(file, output);(glob.sync("resources/assets/extended/js/**/*.js") || []).forEach(file => {
var output = `public/${demo}/${file.replace("resources/assets/extended/", "")}`;
mix.scripts(file, output);
extendedFiles.push(output);
});We will use mix.scripts() instead for the next version because it only concatenates the JS files, instead of modifying them.
Thanks
The code is already like that. The problems is with:
// Global jquery
mix.autoload({
"jquery": ["$", "jQuery"],
Popper: ["popper.js", "default"],
});That is adding the entire jQuery library to my custom JS "admin.js" that I have defined in pages.php:
"admin" => array(
"menu-admin" => array(
"title" => "Menu Items",
"description" => "",
"view" => "admin/menu-admin",
"layout" => array(
"page-title" => array(
"description" => true,
"breadcrumb" => true,
),
),
"assets" => array(
"custom" => array(
"js" => array(
"js/custom/admin/admin.js",
),
),
),
),
),Commenting out the autoload fixes this problem I think. I don't know if it's going to cause a problem with something else, though.
Hi Scott,
Thank you for pointing it out.
// Global jquery
mix.autoload({
"jquery": ["$", "jQuery"],
Popper: ["popper.js", "default"],
});It will cause problems in other parts if we remove this. If this part cause issue with the jQuery library in the custom JS file, we will find another solution if we want to remove it.
Thanks
Then please provide another solution, because I can’t use jQuery in my custome JS files without commenting that out.
Hi Scott,
You may remove this part for now.
// Global jquery
mix.autoload({
"jquery": ["$", "jQuery"],
Popper: ["popper.js", "default"],
});We have tested and there is no issue so far. We will check it further if there is any issue in future. If everything is okay, we will fix it in the next updates.
Thanks
Amazing how impossible it is to get any support from Keen Themes.
I've been having this problem for about 3 months now.
Hi Scott,
I've had this happen before as well. Ensure you have the datatable JS and CSS loaded into your page as well preferably above your custom JS code.
Just some advice as well. I would move your custom JS code to the public folder.
In config/global/page.php
Here is an example
"system" => array(
"title" => "System Log",
"assets" => array(
"custom" => array(
"css" => array(
"plugins/custom/datatables/datatables.bundle.css",
),
"js" => array(
"plugins/custom/datatables/datatables.bundle.js",
"your_custom_js_path"
),
),
),
),I already have it that way, but it keeps showing me an error, in the same way I will just go to version 3.037, I will confirm if it is corrected in that version
Thanks Eric. That’s exactly how I have mine set up. The datatables JS and CSS files are added, then my custom page script “admin.js” that has my data table code is included after. The problem is that Laravel Mix/Webpack is adding the entire jQuery library to my admin.js file, even though it’s already included in the sitewide plug-ins file. Having jQuery included twice creates errors. I commented out the autoload piece in the webpack config file, and that seemed to fix the issue. But who knows if that’s going to cause problems elsewhere.
I have the same problem, they give me many laps with it
