express-handlebars
express-handlebars copied to clipboard
ericf
How to render a modal Bootstrap dialog popup
I have a node js application which handles all the client requests. I created the views using the express handlebars plugin. So I have a main layout and several views and partials. The main layout receives the views in the body and shows the complete web page.
mainlayout.handlebar
<!DOCTYPE html>
<html>
<head>
{{>vihead}} <!-- partial with the css includes -->
<title>My APP</title>
</head>
<body>
<div class="container">
{{>vinav}} <!-- partial to show the nav bar -->
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
{{{body}}}
</div>
</div>
<footer class="col-12 py-3 bg-light">
<p>© 2018 myAPP, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- SCRIPTS -->
{{>viscripts}} <!-- partial with the js scripts includes -->
</body>
</html> "
The partial vinav.handlebars is the navigation bar included in the main layout. It shows a navigation bar with "Login", "Register", ("Logout" if logged) and "Dashboard". The Dashboard page is always shown even if the user is not logged in.
vinav.handlebars
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#">MY APP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-md-auto">
{{#if user}}
<li class="nav-item"><a class="nav-link" href="/">{{useremail}}</a></li>
<li class="nav-item"><a class="nav-link" href="/users/logout">Logout</a></li>
{{else}}
<li class="nav-item" ><a class="nav-link" href="/users/login">Login</a></li>
<li class="nav-item" ><a class="nav-link" href="/users/register">Register</a></li>
{{/if}}
<li class="nav-item active"><a class="nav-link" href="/">Dashboard <span class="sr-only">(current)</span></a></li>
</ul>
</div>
</nav>
So, for example, if the user clicks "Login" the server gets the /users/login command and sends back the login handlebars view which will be inserted in the {{{body}}} of the main layout.
login.handlebars
<h2 class="page-header">Account Login</h2>
<form method="post" action="/users/login">
<div class="form-group">
<label>EMail</label>
<input type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
The same for Register. Everything works fine.
Now I want to show the login page as a Bootstrap 4 popup in the main layout, I mean, leaving the Dashboard page intact (it must be always shown). I spent the whole day trying to find a way to show and handle the popup but I was not able to find a solution.
I know handlebars is logic-less, so I can't add pure javascript. I also know it has helpers, but I can't figure out how to handle this with an helper.
The popup for the login could be something like this (and another similar for Register):
loginpopup.handlebars
<!-- The boostrap modal login popup-->
<div class="modal fade" id="bpopup" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modalLabel">Flip-flop</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- this is the login.handlebars shown above -->
<h2 class="page-header">Account Login</h2>
<form method="post" action="/users/login">
<div class="form-group">
<label>EMail</label>
<input type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Any idea? Can someone helpme?
Thanks Roberto
Hope this link may help you find the solution you are looking for. https://forums.meteor.com/t/solved-issue-to-display-modal-with-bootstrap-3/8626/5
