Search code examples
node.jshandlebars.jsmaterialize

Materialze CSS modal not showing up in node.js

I am creating my login popup using handlebars and materialize CSS. So the button for the login is in the mainLayout and when the user clicks on the button it will call the partial layout and display the login popup.

But I dont know why my login Popup is not opening on clicking of the button. Here is my MainLayout from which i am calling loginModal.

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

<div class="navbar-fixed ">
  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo left" style="text-decoration:none">Bloggy</a>
      <ul class="right">
        <li><a href="#">CART</a>
        </li>
        <li><a href="#modal1" class="btn waves-effect waves-light red darken-4 loginBtn">LOGIN</a></li>

      </ul>
      <form class=" hide-on-med-and-down" id="form1">
        <div class="input-field" style="max-width: 400pt;">
          <input id="search" type="search" required onkeyup="getBlogs(this.value,0);" placeholder="Search">
          <label class="label-icon" for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
          <div id="searchResults"></div>
        </div>
      </form>

    </div>
  </nav>
</div>


<div class="row">
  <div class="sidenav col l3 s5 m4 z-depth-5">
    <ul>
      <li><a href="sass.html">Signature</a></li>
      <li class="subsection"><a href="/add">Upload</a></li>

      <li class="line"></li>
      <li><a href="/home">Home</a></li>
      <li><a href="/store">Store</a></li>
      <li><a href="sass.html">Request</a></li>
      <li><a href="sass.html">Contact</a></li>
      <li><a href="sass.html">FAQ</a></li>
      <li><a href="sass.html">About us</a></li>
    </ul>
  </div>
</div>


<div class="MainBody">
  {{> loginModal}}
  {{{body}}}
</div>

My LoginModal popup

<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.modal').modal();
    });
</script>

I have also defined partials layout directory in during handlebars intialize

app.engine('hbs',handlebars({
    layoutsDir : __dirname + '/views/layouts',
    defaultLayout : "mainLayout",
    extname : "hbs",
    partialsDir : __dirname + '/views/partial/'
}))

Also When I put put the whole loginPopUp code in the other partials its working fine.So i dont think there is anything wrong with the modal.

Don't know why my popup is not working when calling through mainLayout. Any help would be appreciated.

Solution

  • SCROLL TO BOTTOM FOR UPDATES

    I tried to reproduce your issue, but was unable to. This works for me.. the only difference is I brought in the materialize css file..

    You can fork the repo here if you want

    /index.js

    const express = require('express');
const handlebars = require('express-handlebars');

const app = express();
const appPort = 3000;

app.engine(
  'hbs',
  handlebars({
    layoutsDir: __dirname + '/views/layouts',
    defaultLayout: 'mainLayout',
    extname: 'hbs',
    partialsDir: __dirname + '/views/partial/',
  })
);

app.set('view engine', 'hbs');

app.get('*', (_req, res) => {
  res.render('layouts/mainLayout');
});

app.listen(appPort, () => {
  console.log(`App listening on port: ${appPort}`);
});

    /views/layouts/mainLayout.hbs

    <body>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

  <div class="navbar-fixed ">
    <nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo left" style="text-decoration:none">Bloggy</a>
        <ul class="right">
          <li><a href="#">CART</a>
          </li>
          <li><a href="#modal1" class="btn waves-effect waves-light red darken-4 loginBtn">LOGIN</a></li>

        </ul>
        <form class=" hide-on-med-and-down" id="form1">
          <div class="input-field" style="max-width: 400pt;">
            <input id="search" type="search" required onkeyup="getBlogs(this.value,0);" placeholder="Search">
            <label class="label-icon" for="search"><i class="material-icons">search</i></label>
            <i class="material-icons">close</i>
            <div id="searchResults"></div>
          </div>
        </form>

      </div>
    </nav>
  </div>


  <div class="row">
    <div class="sidenav col l3 s5 m4 z-depth-5">
      <ul>
        <li><a href="sass.html">Signature</a></li>
        <li class="subsection"><a href="/add">Upload</a></li>

        <li class="line"></li>
        <li><a href="/home">Home</a></li>
        <li><a href="/store">Store</a></li>
        <li><a href="sass.html">Request</a></li>
        <li><a href="sass.html">Contact</a></li>
        <li><a href="sass.html">FAQ</a></li>
        <li><a href="sass.html">About us</a></li>
      </ul>
    </div>
  </div>


  <div class="MainBody">
    {{> loginModal}}
    {{{body}}}
  </div>

    /views/partial/loginModal.hbs

    <div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $('.modal').modal();
  });
</script>

    package.json

    {
  "name": "materialize-css-modal-issues",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "express-handlebars": "^4.0.4",
    "handlebars": "^4.7.6"
  }
}

    --------------------- UPDATE 1 -------------------------

    I was able to get this resolved by changing mainLayout.hbs to the code below.. Essentially, I just moved all script tags to the top of the body in the mainLayout.

    If you would like, you can fork my repo with changes, or I can send you a PR... whichever you prefer.

    Repo can be found here

    <!DOCTTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pics Art</title>
    <link rel="stylesheet" href="/css/navbar.css">


    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" />
  </head>



  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>

    <div class="navbar-fixed ">
      <nav>
        <div class="nav-wrapper">
          <a href="#!" class="brand-logo left" style="text-decoration:none">Bloggy</a>
          <ul class="right">
            <li><a href="#">CART</a>
            </li>
            {{!-- <li><a class="login" href="login.php">LOGIN</a>
            </li> --}}
            <li><a href="#modal1" class="btn waves-effect waves-light red darken-4 loginBtn">LOGIN</a></li>

          </ul>
          <form class=" hide-on-med-and-down" id="form1">
            <div class="input-field" style="max-width: 400pt;">
              <input id="search" type="search" required onkeyup="getBlogs(this.value,0);" placeholder="Search">
              <label class="label-icon" for="search"><i class="material-icons">search</i></label>
              <i class="material-icons">close</i>
              <div id="searchResults"></div>
            </div>
          </form>

        </div>
      </nav>
    </div>


    <div class="row">
      <div class="sidenav col l3 s5 m4 z-depth-5">
        <ul>
          <li><a href="sass.html">Signature</a></li>
          <li class="subsection"><a href="/add">Upload</a></li>

          <li class="line"></li>
          <li><a href="/home">Home</a></li>
          <li><a href="/store">Store</a></li>
          <li><a href="sass.html">Request</a></li>
          <li><a href="sass.html">Contact</a></li>
          <li><a href="sass.html">FAQ</a></li>
          <li><a href="sass.html">About us</a></li>
        </ul>
      </div>
    </div>


    <div class="MainBody">
      {{> loginModal}}
      {{{body}}}
    </div>
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    -->