Krzysztof Wilk staff commented 3 years ago

Hi!

Where did you write your side nav initialization code before? The proper script declaration should look like this:

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
  $(document).ready(function() {
  // SideNav Button Initialization
  $(".button-collapse").sideNav();
  // SideNav Scrollbar Initialization
  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  var ps = new PerfectScrollbar(sideNavScrollbar);
  });
</script>

duckies free commented 3 years ago

Hi 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:

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 3 years 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 free commented 3 years ago

Hi 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 3 years 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 free commented 3 years ago

Hi Krzysztof, Yes, you are correct that a is missing but after adding it, I still see the error. I reviewed your snippet but the difference is the extra after the Copyright and you had removed the rest of the html sections such as html and head, plus you moved the Javascript code to the JS tab. I have modified my original scriplet to reflect yours and of course the error, Uncaught TypeError: $(...).sideNav is not a function, is no longer visible. 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? This should replicate the error. Thank you.

Krzysztof Wilk staff commented 3 years ago

Hi!

I answered you here https://mdbootstrap.com/support/jquery/uncaught-typeerror-sidenav-is-not-a-function/.

Best regards

Grzegorz Bujański staff commented 4 years ago

It looks like you didn't import jQuery

kawuvis free commented 2 years ago

not worek king this code is problems

killi3000 free commented 4 years ago

Tried it. Now this error occurs:

Uncaught TypeError: $ is not a function at (index):469 (anonymous) @ (index):469

Grzegorz Bujański staff commented 4 years ago

This error doesn't tell me much. can you check what's in the place this error is pointing to?