Uncaught TypeError: $(...).sideNav is not a function

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Uncaught TypeError: $(...).sideNav is not a function

duckies asked 4 years ago

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.

Krzysztof Wilk staff answered 4 years ago

Hi!

We don't put a header and a scripts section in our online editor because it already has these files.

I copied your code and everything works for me (I tried on Chrome and Firefox and the result is the same). I put my code to this snippet - could you check if it works for you? https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2813301

Best regards

duckies commented 4 years ago

Hi Krzysztof, I copied the code from your new snippet to a new dist/index.html and saw the same error, Uncaught TypeError: $(...).sideNav is not a function, in Firefox. BTW, in your new snippet, I opened the developer's console in Chrome, I see the error, Uncaught ReferenceError: $ is not defined. Thanks.

Marcin Luczak staff commented 4 years ago

Hi @duckies,

Changing import from <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> to <script type="text/javascript" src="js/jquery.min.js"></script> should solve Uncaught ReferenceError: $ is not defined.. Please check your project js directory and check what is the name of the jquery file.

Regards, Marcin

duckies commented 4 years ago

Hi Marcin, Under MDB-Gulp-Pro_4.19.1/dist/js folder, I only see jquery-3.4.1.min.js and this is being included in index.html. Please advise. Thanks.

Marcin Luczak staff commented 4 years ago

I've downloaded the MDB-Gulp-Pro_4.19.1 package from our repository to have the same setup as you have and I have to admit that pasting @Krzysztof Wilk's code from the snippet works fine at my local project. Would you please send me the package with your project via mail to m.luczak@mdbootstrap.com? I will try to find if everything is ok with your setup/code inside the project.

You can also try to download the MDB package once again, install dependencies, paste Krzysztof's code, and check if it is working. Please also paste versions of your npm, node, and gulp packages.

Regards, Marcin

duckies commented 4 years ago

Hi Marcin,I copied and pasted Krzyzstof's snippet again to an html file and still getting the same error. I tared my dist/ directory and sent it along with other info. you requested to m.luczak@mdbootstrap.com but I received the mail undeliverable email to mbukacz@gmail.com. Hope my email made it to m.luczak@mdbootstrap.com. Thanks.

Marcin Luczak staff commented 4 years ago

Yes, I've got a message from you and I've sent you a response. If you didn't receive anything I can also write here that the main reason your code is not working is the corrupted mdb.min.js file. Try to download a new MDB package and the problem should not occur anymore.

Best, Marcin

duckies commented 4 years ago

Hi Marcin,

I did not receive any direct emails from you except the notification from this support site. So mdb.min.js is corrupted? Thanks. I unzipped the original downloaded zip file again and was able to run index.html file w/o errors in the console. The only thing I can think of was that I followed customization instructions from another page, https://mdbootstrap.com/education/bootstrap/customization/, step 4 to comment out inclusion of one/two JS files to regenerate mdb.min.js but I had put things back by reverting the commented out sections I had done. Now this concerns me that generating of mdb.min.js was not done properly that leads to the corrupted file. I will avoid commenting/customizing JS files per tutorial in the future.

Thank you and Krzysztof, I am back in business.

Marcin Luczak staff commented 4 years ago

Hi,

In the mail, I wrote that your mdb.min.js file contains hundreds of lines of code less than the original file, so it must have been this customization that changed your file. I'm glad that you've managed to fix that.

Best, Marcin
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: All
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags
console-error
Related topics
0
Console Eror
0
Console being flooded by "Argument 1 is not an object" errors.
0
Invalid hook call. Hooks can only be called inside of the body of a function component
0
JS error while using local version of mdb.umd.min.js
0
MDBModal throws error / application breaks
About author
duckies
45Support score
5Questions 2Answers
0Snippets likes 6Snippets