Topic: MDB 4 Initial Setup, js firing errors.

Pratik Kelwalkar free asked 6 years ago

Hi, I downloaded the free version of MDB 4 and in a simple HTML file ive added a button and a input, neither works and fires a error on mdb.js saying the document.body is null, here's my HTML
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>MDB4 Demo</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" type="text/css" href="MDB-4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="MDB-4/css/mdb.min.css">
    <link rel="stylesheet" type="text/css" href="MDB-4/css/style.css">

    <script src="MDB-4/js/jquery-2.2.3.min.js"></script>
    <script src="MDB-4/js/tether.min.js"></script>
    <script src="MDB-4/js/bootstrap.min.js"></script>
    <script src="MDB-4/js/mdb.min.js"></script>


<div class="container">
    <div class="md-form">
        <i class="fa fa-envelope prefix"></i>
        <input type="email" id="form9" class="form-control validate">
        <label for="form9" data-error="wrong" data-success="right" class="">Type your email</label>

    <button type="button" class="btn btn-success">Primary</button>
    <button type="button" class="btn btn-primary waves-effect waves-light">Primary</button>


Problems : Input labels do not float. Button Ripple effect missing. Console Error - Cannot read property 'addEventListener' of nullWaves.init @ mdb.js:5093(anonymous function) @ mdb.js:5220 What is the problem, am i missing something?

jpa57 free answered 5 years ago

Thanks Pratik, that was my problem as well. It wasn't the same as the quick start because I am integrating into a rails 4 project. Not only is the location of the javascript load important but also the order of the loads. application.js:

//= require js/jquery-2.2.3
//= require js/tether
//= require js/bootstrap
//= require js/mdb
application.css.erb (I get font-awesome from a gem):

 *= require font-awesome
 *= require css/bootstrap
 *= require css/mdb
So now the <%= javascript_include_tag "application" %> goes inside <body> where traditionally I've put those in inside <head>. I left the <%= stylesheet_link_tag "application", media: "all" %> in <head>. None of the solutions I found to bundle MDBootstrap worked, including which has an etry at I had to actually copy js, css and img into /vendor/assets/mdb/*

Pratik Kelwalkar free answered 6 years ago

Problem resolved, had to load the scripts inside the body.

Michal Szymanski staff answered 6 years ago

Hi, have you read our Quick Start tutorial?

robert713 free commented 5 years ago

hello I have a problem with SideNav, I would like to help me please

Please insert min. 20 characters.


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


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No