sidenav - jQuery issue - Material Design for Bootstrap

Topic: sidenav - jQuery issue

stef.kariotidis pro asked 7 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.

Add comment

D'Artagnan free answered 3 years ago

0 0 Best answer

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

Add comment

dmakhkamov pro answered 6 years ago

0 0 Best answer

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 Wierzbicka staff commented 6 years ago

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

Add comment

badjina pro answered 7 years ago

0 0 Best answer

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

Add comment

rjdavid pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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!

Add comment

Adrian Sawicki free answered 7 years ago

0 0 Best answer

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

Add comment

stef.kariotidis pro answered 7 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

stef.kariotidis

Pro User 7Support score
1Questions 2Answers 0Snippets