sidenav - jQuery issue

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: sidenav - jQuery issue

stef.kariotidis pro asked 8 years ago

Hi, I am using MDB 4.3 PRO and trying to use the double fixed navs. The issue is that i'm getting errors in console: jQuery.Deferred exception: $(...).sideNav is not a function TypeError: $(...).sideNav is not a function my scripts loading order: 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
        integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
        crossorigin="anonymous"></script>
<script src="{{ mix('js/app.js') }}"></script>
where app.js calls the $('.button-collapse').sideNav(); Any help would be grateful.

stef.kariotidis pro answered 8 years ago

I am posting a potential fix for this. I've moved the call to the plugin in an inline script at the bottom of the page which is an ugly solution. The rest of my JS code goes through a webpack build bundled into an app.js file which in turn is loaded last in the page. For some reason the sidenav plugin does not like it. Problem partialy solved but if anyone has an answer I am all ears. Regards

Adrian Sawicki answered 8 years ago

Hello Stef Kariotidis, You can make different file just for initialization of sidenav (and other MDB components, which you are using). At the moment webpack support is in MDB’s TODO list. Regards

rjdavid pro answered 7 years ago

I'm going to re-open this issue because I'm using MeteorJS and I'm getting this error. Since we need parallel loading of javascript assets to make initial access fast, sometimes, the call to the sidenav() function was performed even before loading mdb.js.

Here is my temporary solution:

waitForSideNav() {
  if (typeof$(".button-collapse").sideNav!=='undefined' && $.isFunction($(".button-collapse").sideNav)) {
    $(".button-collapse").sideNav();
  } else {
    setTimeout(this.waitForSideNav, 100);
  }
}

All I have to do is to call waitForSideNav()

This is not an elegant solution but it works!

badjina pro answered 7 years ago

Hi, Laravel in bootstrap.js load jquery and bootstrap-sass and that's why you get this error, you need to comment this line (11):

window.$ = window.jQuery = require('jquery');

and recompile js and it will work fine

dmakhkamov pro answered 6 years ago

Hi guys, Im trying to build a sidenav navigation, just like in this example https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-hidden-navbar-fixed.html# it gives an error described above Please advice

dmakhkamov pro commented 6 years ago

Nevermind, replaced the js files from PRO folder. it started working. apparently i was working with the Free version JS files before

Marta Szymanska staff pro premium commented 6 years ago

Sidenav is a pro component, so it needs premium javascript code.

D'Artagnan answered 3 years ago

jquery.min.js:2 Uncaught TypeError: $(...).sideNav is not a function at HTMLDocument. (index.php:386) at e (jquery.min.js:2) at t (jquery.min.js:2)

Mikołaj Smoleński staff commented 3 years ago

It looks like you're a free user and have no access to pro component.

Keep coding,  Mikołaj from MDB

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
stef.kariotidis
Pro User
7Support score
1Questions 2Answers
0Snippets likes 0Snippets