1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: jquery mdb error

Daniel Santos free asked 6 years ago

I'm using https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.js script and I get this error on the javascript console:

Uncaught TypeError: Cannot read property 'swing' of undefinedat mdb.js:80

I'm using this jquery https://code.jquery.com/jquery-3.2.1.slim.min.js

Bartłomiej Malanowski staff commented 6 years ago

could you please share your code with us?

Daniel Santos free commented 6 years ago

<pre><!DOCTYPE html><!DOCTYPE html><html lang="pt"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Grupo Partilhar</title> <!-- Font Awesome --> <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot</a>; rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- Bootstrap core CSS --> <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> --> <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css&quot" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css&quot</a>; integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css"&gt" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css"&gt</a>; <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"></head> <body> <header> <!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark indigo fixed-top"> <div class="container"> <!-- Navbar brand --> <a class="navbar-brand" href="#">Grupo Partilhar</a> <!-- Collapse button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <!-- Collapsible content --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Links --> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> <!-- Links --> </div> <!-- Collapsible content --> </div> </nav> <!--/.Navbar--> <!-- Carousel --> <!--Carousel Wrapper--> <div id="carrosel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="10000" data-pause="false"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carrosel" data-slide-to="0" class="active"></li> <li data-target="#carrosel" data-slide-to="1"></li> <li data-target="#carrosel" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <div class="view hm-black-light"> <img class="d-block h-100 imagem-carrosel" src="<a href="http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(1)" rel="nofollow">http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(1)</a>.jpg" alt="First slide"> <div class="mask"></div> </div> <div class="carousel-caption full-bg-img flex-center"> <ul class="animated fadeInUp col-md-12"> <li> <h1 class="h1-responsive flex-item">Material Design for Bootstrap 4</h1> </li> <li> <p class="flex-item">The most powerful and free UI KIT for Bootstrap</p> </li> <li> <a target="_blank" href="<a href="http://mdbootstrap.com/getting-started/&quot" rel="nofollow">http://mdbootstrap.com/getting-started/&quot</a>; class="btn btn-primary btn-lg flex-item" rel="nofollow">Sign up!</a> </li> <li> <a target="_blank" href="<a href="http://mdbootstrap.com/material-design-for-bootstrap/&quot" rel="nofollow">http://mdbootstrap.com/material-design-for-bootstrap/&quot</a>; class="btn btn-default btn-lg flex-item" rel="nofollow">Learn more</a> </li> </ul> </div> </div> <div class="carousel-item"> <!--Mask color--> <div class="view hm-black-light"> <img class="d-block h-100 imagem-carrosel" src="<a href="http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(2)" rel="nofollow">http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(2)</a>.jpg" alt="Second slide"> <div class="mask"></div> </div> <div class="carousel-caption full-bg-img flex-center"> <ul class="animated fadeInUp col-md-12"> <li> <h1 class="h1-responsive">Lots of tutorials at your disposal</h1> </li> <li> <p>And all of them FREE!</p> </li> <li> <a target="_blank" href="<a href="http://mdbootstrap.com/bootstrap-tutorial/&quot" rel="nofollow">http://mdbootstrap.com/bootstrap-tutorial/&quot</a>; class="btn btn-primary btn-lg" rel="nofollow">Start learning</a> </li> </ul> </div> </div> <div class="carousel-item"> <!--Mask color--> <div class="view hm-black-light"> <img class="d-block h-100 imagem-carrosel" src="<a href="http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(3)" rel="nofollow">http://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20(3)</a>.jpg" alt="Third slide"> <div class="mask"></div> </div> <div class="carousel-caption full-bg-img flex-center"> <ul class="animated fadeInUp col-md-12"> <li> <h1 class="h1-responsive">Visit our support forum</h1> </li> <li> <p>Our community can help with any question</p> </li> <li> <a target="_blank" href="<a href="http://mdbootstrap.com/forums/forum/support/&quot" rel="nofollow">http://mdbootstrap.com/forums/forum/support/&quot</a>; class="btn btn-primary btn-lg" rel="nofollow">Support forum</a> </li> </ul> </div> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carrosel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carrosel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> </div> <!--Carousel Wrapper--> <!-- Carousel --> </header> <main> <section class="my-5"> <div class="container text-center"> <h1>Nós somos o grupo de voluntários <i><b>Partilhar</b></i></h1> <h3 class="h3-responsive text-muted"><i>Somos de Leça da Palmeira e distribuímos alimentos a quem mais precisa</i></h3> </div> </section> <section> <div class="container"> <h2 class="text-center">Realizamos</h2> <div class="row mt-4"> <div class="col-sm-6"> <!--Card--> <div class="card"> <!--Card image--> <img class="img-fluid" src="<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg&quot" rel="nofollow">https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg&quot</a>; alt="Card image cap"> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Recolha de alimentos</h4> <!--Text--> <p class="card-text">Deslocamo-nos a padarias e cafés para irmos buscar pão, bolos e sopas.<br>Estes alimentos ficariam a estragar e porventura acabariam no lixo caso não os recolhêssemos.</p> </div> </div> <!--/.Card--> </div> <div class="col-sm-6"> <!--Card--> <div class="card"> <!--Card image--> <img class="img-fluid" src="<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg&quot" rel="nofollow">https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg&quot</a>; alt="Card image cap"> <!--Card content--> <div class="card-body"> <!--Title--> <h4 class="card-title">Distribuição de alimentos</h4> <!--Text--> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <!--/.Card--> </div> </div> </div> </section> </main> <!--Footer--> <footer class="page-footer blue center-on-small-only mt-0"> <!--Footer Links--> <div class="container"> <div class="row"> <!--First column--> <div class="col-md-6"> <h5 class="title">Footer Content</h5> <p>Here you can use rows and columns here to organize your footer content.</p> </div> <!--/.First column--> <!--Second column--> <div class="col-md-6"> <h5 class="title">Links</h5> <ul> <li><a href="#!">Link 1</a></li> <li><a href="#!">Link 2</a></li> <li><a href="#!">Link 3</a></li> <li><a href="#!">Link 4</a></li> </ul> </div> <!--/.Second column--> </div> </div> <!--/.Footer Links--> <!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2017 Copyright: <a href="<a href="https://alexandre1985.github.io">Daniel" rel="nofollow">https://alexandre1985.github.io">Daniel</a> Santos</a> </div> </div> <!--/.Copyright--> </footer> <!--/.Footer--> <!-- SCRIPTS --> <!-- JQuery --> <script src="<a href="https://code.jquery.com/jquery-3.2.1.slim.min.js&quot" rel="nofollow">https://code.jquery.com/jquery-3.2.1.slim.min.js&quot</a>; integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Bootstrap tooltips --> <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js&quot" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js&quot</a>; integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <!-- Bootstrap core JavaScript --> <script src="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js&quot" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js&quot</a>; integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="<a href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.js"></script&gt" rel="nofollow">https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.js"></script&gt</a>; <script> </script></body> </html></pre>

Bartłomiej Malanowski staff commented 6 years ago

Ok, I see where's the problem. You're getting that error because you use jQuery slim version. Try to use standard version instead and it'll work!

Daniel Santos free commented 6 years ago

Thank you

Deleted free answered 5 years ago

i am currently using popper1.14.3 along with jquery.3.3.1.slim.min.js this combination is required for the popper to work. however when i do so i get this same error. if i do go with the standard min.js then popper.js starts to throw execeptions..   what should be done

Bartłomiej Malanowski staff commented 5 years ago

did you try to use standard jQuery which is included to MDB package?

Daniel Santos free answered 6 years ago

I haven't quite figured out how to share code nicely in this forum
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
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Daniel Santos
10Support score
3Questions 2Answers 0Snippets