Hi,

I am following the instructions from https://mdbootstrap.com/education/bootstrap/custom-skin/, under step 1 Arrangements and copied/pasted HTML and code for creating sidenav in /MDB-Gulp-Pro_4.19.1/dist/index.html. However, I am getting these errors:

1) Uncaught ReferenceError: $ is not defined but jquery.min.js is included at the bottom of the page:

enter image description here2) If I move the libraries to head section, then I get this error:Uncaught TypeError: $(...).sideNav is not a function file:///C://mdbootstrap_pro/MDB-Gulp-Pro_4.19.1/dist/index.html#:333) Also, source map file is missing under:Source map error: Error: NetworkError when attempting to fetch resource.Resource URL: file:////MDB-Gulp-Pro_4.19.1/dist/js/bootstrap.min.jsSource Map URL: bootstrap.min.js.mapHere is the Javascript code defined after head section, before body section :$(document).ready(function() { // SideNav Button Initialization $(".button-collapse").sideNav(); // SideNav Scrollbar Initialization var sideNavScrollbar = document.querySelector('.custom-scrollbar'); var ps = new PerfectScrollbar(sideNavScrollbar); });Please help.Thanks.Krzysztof Wilk staff commented 3 days agoHi!Where did you write your side nav initialization code before? The proper script declaration should look like this: $(document).ready(function() { // SideNav Button Initialization $(".button-collapse").sideNav(); // SideNav Scrollbar Initialization var sideNavScrollbar = document.querySelector('.custom-scrollbar'); var ps = new PerfectScrollbar(sideNavScrollbar); });

duckies commented 3 days agoEdit DeleteHi Krzysztof,

I have already included the same code snippet you've provided in my html file, in the head section or before the end of body tag. I am getting the error, Uncaught TypeError: $(...).sideNav is not a function with the following:

$(document).ready(function () { // SideNav Button Initialization $(".button-collapse").sideNav(); // SideNav Scrollbar Initialization var sideNavScrollbar = document.querySelector('.custom-scrollbar'); var ps = new PerfectScrollbar(sideNavScrollbar); });Can you try running the sample html provided by the tutorial and see if you run into the same error?

BTW, where can I get bottstrap.min.js.map file? I am getting the source map error.

Thanks.

Krzysztof Wilk staff commented 2 days ago

Hi @duckies!

There is a mistake in the tutorial because the side nav initialization code should be wrapped in the $(document).ready() function. The code I provided above works with our tutorial (I checked it). Could you specify some details about your environment? What browser do you use? Do you use some server-kind environment like XAMPP, Node.js server, Laravel? Or maybe you are using a bundler like Webpack or Gulp? Could you also make a snippet with an example that doesn't work for you using our online editor? You can find it here https://mdbootstrap.com/snippets/ :)

Map files shouldn't affect your code, but it is our fault there are no map files in our package. So, for now, you shouldn't worry about them :) Best regards

duckies commented a day agoEdit DeleteHi Krzysztof,Thanks for your response. Essentially I used index.html from MDB-Gulp-Pro_4.19.1/dist and copy/pasted code from customization skins tutorial. Not doing anything fancy, just running index.html from Windows 10 with Firefox as my browser(to avoid CORS issue from Chrome). I have created a snippet, https://mdbootstrap.com/snippets/jquery/karatemom/2812403#html-tab-view , with content from my index.html in the HTML tab. Thanks.

Krzysztof Wilk staff commented 24 hours ago

Hi!

It seems that this error happened because you forgot to close the Copyright section div. I saw your problem in your snippet and correct it. You can check it here: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2813301

If something still won't work - could you make a separate topic for this issue? It'll be more convenient to talk :)

Best regards

duckies commented less than a minute agoEdit Delete

Hi Krzysztof, Yes, you are correct that a closing div is missing but after adding it, I still see the error in index.html when running in Firefox. I reviewed your snippet but the difference is the extra closing div after the Copyright and you had removed the rest of the html sections such as html, head from the HTML tab; plus you moved the Javascript code to the JS tab. I have modified my original scripplet to reflect yours and of course the error, Uncaught TypeError: $(...).sideNav is not a function, is no longer visible. I think the issue has to do with the inclusion of js files. Can you try to copy and paste the original snippet with the html, head and script sections to index.html under MDB-Gulp-Pro_4.19.1/dist folder and run it in Firefox? This should replicate the error. Thank you.