$(...).sideNav is not a function

Question

I have just downloaded mdbootstrap. Upon following the instructions for implementing a side-nav on my webpage I get the following error when I try to initialize it:

Uncaught TypeError: $(...).sideNav is not a function at index.html:133).

Kindly help. I have tried rearranging the order of my files but this doesn't seem to help.

<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
  $(".button-collapse").sideNav();

  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);  
</script>

score 6 · Accepted Answer · answered Mar 28 '19 at 10:54

6

Watch out, the sideNav component is only for pro users. Perhaps you try to import a premium component with the "cheap" version of mdbootstrap

answered Mar 28 '19 at 10:54

Hadrien Delphin

590
1
6
19

yeah this is actually it – Dennis Mar 28 '19 at 15:10

score 0 · Answer 2 · answered Mar 28 '19 at 10:56

0

You need to load jQuery first.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
  $(".button-collapse").sideNav();

  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);  
</script>

And make sure you refresh the file in the web browser without cache. You can refresh it by hiting Shitf + F5 in Chrome.

answered Mar 28 '19 at 10:56

Mikel Granero

379
6
15

1

If the $ object (jquery) is recognized, that means that Jquery is well imported ;-) – Hadrien Delphin Mar 28 '19 at 11:00
I have tried this but still encounter the same error, i have double checked with your solution and still nothing. – Dennis Mar 28 '19 at 11:40

Transamunos · Answer 3 · 2020-08-20T10:31:38.803

0

You need to load jQuery sideNav first. Do like this:

$(function(){
  const Ps = new PerfectScrollbar();
  $(".button-collapse").sideNav();
  var sideNavScrollbar = document.querySelector('.custom-scrollbar');
  Ps.initialize(sideNavScrollbar);  
})

edited Aug 20 '20 at 10:31

answered Aug 19 '20 at 16:36

Transamunos

101
4

$(...).sideNav is not a function

3 Answers3