Search code examples
node.jsexpresstwitter-bootstrap-3ejsnode-request

Node.js express request - Fade in and out bootstrap modal on request error

I'm using node.js express express-session and request. If a request has an error I fade in and out a bootstrap alert message. This works. But if I want to fade in and out a bootstrap modal ... this doesn't work. That's my setup:

script.js

$(document).ready(function(){

    // alerts
    window.setTimeout(function() {
        $(".alert").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove();
        });
    }, 4000);

    // modals
    window.setTimeout(function() {
        $("#myModal").fadeIn('slow', function(){
            $(this).modal('hide');
            });
    }, 4000);

});

modalError.ejs

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <%= messages.error %>
      </div>
    </div>
  </div>
</div>

alertError.ejs

<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <%= messages.error %>
</div>

login.ejs

<html>
    <body>
        <div>   
            <% if (messages.error) { %>
                <% include partials/alertError %>
            <% } %>

            <% if (messages.error) { %>
                <% include partials/modalError %>
            <% } %>
        </div>
        <% include partials/script %>
    </body>
</html>

Does anybody have a solution?

In the request I'm checking a status this:

if(getStatus == 401){
  req.flash('error', 'An error occurred during login.') 
  res.redirect('/login')
}
Solution

  • you can access ejs variables inside script , 

    <script>
    if(messages.error){
     $("#myModal").modal('show');
    }   
</script>