MDB 4 Initial Setup, js firing errors.

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">
<head>
    <meta charset="UTF-8">
    <title>MDB4 Demo</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <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>

</head>
<body>

<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>
    </div>

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

    </div>

</body>
</html>

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?

Add comment

jpa57 free answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

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 rails-assets.org which has an etry at https://rails-assets.org/#/components/MDBootstrap. I had to actually copy js, css and img into /vendor/assets/mdb/*

Add comment

Pratik Kelwalkar free answered 6 years ago

0 0 Best answer