Flash Message from ejs in Express 4

node.js ejs express-4 connect-flash
Jane picture Jane · Sep 7, 2016 · Viewed 10.9k times · Source

I am trying to show a confirmation message before user deletes anything. I've tried following various related sources that I found in internet, but couldn't get them to work. I am using EJS template and Express 4.

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();
var flash = require('connect-flash');
var session = require('express-session');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap


// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('stylus').middleware(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));

app.use(session({ secret: 'zxcv' })); // session secret
app.use(flash()); // use connect-flash for flash messages stored in session

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function (err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function (err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

app.listen(8000);
module.exports = app;

index.js

var express = require('express');
var router = express.Router();

var searchModule = require('../crud_module/search.js');
var updateModule = require('../crud_module/update.js');
var deleteModule = require('../crud_module/delete.js');


/* GET home page. */
router.get('/', function (req, res) {
    res.render('index', { title: '' });
});

router.post('/search-results', function (req, res) {
    searchModule.search(req.body, function (data) {
        res.render('index', { title: '', results: data });
    });
});

router.post('/edit-data', function (req, res) {
    searchModule.searchById(req.body, function (data) {
        res.render('edit', { title: '', results: data });
    });
});

router.post('/save-changes', function (req, res) {
    if (req.body.change == "update") {
        updateModule.saveChanges(req.body, function (err) {
            if (err) {
                res.render('edit', { message: req.flash('Error', 'Error Occured') });

            } else {
                //req.flash('success', 'Your name was updated');
                res.render('edit', { message: req.flash('success', 'Data was updated')) });
            }
            res.redirect('/edit-data');
        });
    }
if (req.body.change == "delete") {
        deleteModule.deleteRecord(req.body, function (data) {
            res.render('edit', { title: 'Volume Tracker', confirmation: data });

        });
    }
});


module.exports = router;

edit.ejs

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link href="node_modules/popups/css/popupS.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://gc.kis.scr.kaspersky-labs.com/5B1FA715-F8FF-784F-A4C9-0D867337CB3D/main.js" charset="UTF-8"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="node_modules/elasticsearch/src/elasticsearch.angular.js"></script>
    <script src="node_modules/popups/dist/popupS.min.js"></script>
    <script language="javascript">

    </script>
<style type="text/css">


</style>

</head>

<body>
<br>

<form action='/save-changes' method='post'>
<div class="container">



    <% if(locals.results) { %>
      <table class="table table-bordered table-hover table-condensed"> 
        <tr>
            <th  bgcolor="silver">Term Key</th>
            <td>
              <input name="termKey"  value= "<%= results[0]._source.termkey %>" style="border:none; width:100%"/>
            </td>
          </tr>

          <tr>
            <th bgcolor="silver">Active</th>
            <td>
              <input name="active" value= "<%= results[0]._source.active %>" style="border:none; width:100%"/>
            </td>
          </tr>

          <tr>
            <th bgcolor="silver">Term Description</th>
            <td>
              <input name="termDescription" value= "<%= results[0]._source.termdescription %>" style="border:none; width:100%"/>
            </td>
          </tr>


      </table>  
      <div align="center">
      <button type="submit" class="btn btn-info" name="change" value="update"> Save Changes </button>
      <button type="submit" class="btn btn-danger" name="change" value="delete"> Delete Record </button>
      </div>


    <% } %>
    </form>
    <br>

    </div>

    </body>
    </html>

Here, when the user will click on the delete button, a confirmation message will be shown (here--> in index.js, I first tried showing confirmation message after user updates anything; which didn't work either). But whenever I try to include this: 

    <% if (message.length > 0) { %>
            <div class="alert alert-danger"><%= message %></div>
        <% } %>
in edit.ejs , I get error:
ReferenceError: 
    92|     </form>
    93|     <br>
 >> 94|     <% if (message.length > 0) { %>
    95|         <div class="alert alert-danger"><%= message %></div>
    96|     <% } %>




 message is not defined
        at eval (eval at <anonymous> (\ElasticSearch\ES\VolumeTracker\VolumeTracker\node_modules\ejs\lib\ejs.js:495:12), <anonymous>:41:12)
    at Template.compile.returnedFn (\ElasticSearch\ES\VolumeTracker\VolumeTracker\node_modules\ejs\lib\ejs.js:524:17)
    at View.exports.renderFile [as engine] (\ElasticSearch\ES\VolumeTracker\VolumeTracker\node_modules\ejs\lib\ejs.js:378:31)
    at View.render (\ElasticSearch\ES\VolumeTracker\VolumeTracker\node_modules\express\lib\view.js:76:8)
    at Function.app.render (\ElasticSearch\ES\VolumeTracker\VolumeTracker\node_modules\express\lib\application.js:527:10)
    at ServerResponse.res.render (\ElasticSearch\ES\VolumeTracker\VolumeTracker\node_modules\express\lib\response.js:900:7)
    at \ElasticSearch\ES\VolumeTracker\VolumeTracker\routes\index.js:22:13
    at \ElasticSearch\ES\VolumeTracker\VolumeTracker\crud_module\search.js:45:9
    at tryCallOne (\ElasticSearch\ES\VolumeTracker\VolumeTracker\node_modules\elasticsearch\node_modules\promise\lib\core.js:37:12)
    at \ElasticSearch\ES\VolumeTracker\VolumeTracker\node_modules\elasticsearch\node_modules\promise\lib\core.js:123:15

Answer

Ad Rienks picture Ad Rienks · Dec 3, 2017

I have a simpler solution; as an example: after a succesful registration of a new user in the file routes/users.js:

req.flash('success_msg', 'You are registered and can now log in');

res.redirect('login');

In a file views/partials/_messages.ejs:

<% if (success_msg != '') { %>
 <div class="alert alert__success"><%= success_msg %></div>
<% } %>

And in views/login.ejs include:

<% include ./partials/_messages %>

No other JavaScript needed!

Related questions

How can I include css files using node, express, and ejs?

I'm trying to follow the instructions to https://stackoverflow.com/a/18633827/2063561, but I still can't get my styles.css to load. From app.js app.use(express.static(path.join(__dirname, 'public'))); In my .ejs, I have tried both of …

Read More
How to redirect to another page in node.js

I have a login and a signup page. When random user wants to login, and login is successful, I want to redirect him to another .ejs page (for example UserHomePage.ejs), however, nothing I've tried have worked so far. if (…

Read More
Node.js - EJS - including a partial

I am trying to use Embedded Javascript renderer for node: https://github.com/visionmedia/ejs I would like to know how I can include another view file (partial) inside a .ejs view file.

Read More