node.js - Flash Message from ejs in Express 4 -
i trying show confirmation message before user deletes anything. i've tried following various related sources found in internet, couldn't them work. using ejs template , 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 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 flash messages stored in session app.use('/', routes); app.use('/users', users); // catch 404 , forward error handler app.use(function (req, res, next) { var err = new error('not found'); err.status = 404; next(err); }); // error handlers // development error handler // 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 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'); /* 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 updated'); res.render('edit', { message: req.flash('success', 'data 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 user click on delete button, confirmation message shown (here--> in index.js, first tried showing confirmation message after user updates anything; didn't work either). whenever try include this:
<% if (message.length > 0) { %> <div class="alert alert-danger"><%= message %></div> <% } %> in edit.ejs , error: referenceerror: 92| </form> 93| <br> >> 94| <% if (message.length > 0) { %> 95| <div class="alert alert-danger"><%= message %></div> 96| <% } %> message not defined @ eval (eval @ <anonymous> (\elasticsearch\es\volumetracker\volumetracker\node_modules\ejs\lib\ejs.js:495:12), <anonymous>:41:12) @ template.compile.returnedfn (\elasticsearch\es\volumetracker\volumetracker\node_modules\ejs\lib\ejs.js:524:17) @ view.exports.renderfile [as engine] (\elasticsearch\es\volumetracker\volumetracker\node_modules\ejs\lib\ejs.js:378:31) @ view.render (\elasticsearch\es\volumetracker\volumetracker\node_modules\express\lib\view.js:76:8) @ function.app.render (\elasticsearch\es\volumetracker\volumetracker\node_modules\express\lib\application.js:527:10) @ serverresponse.res.render (\elasticsearch\es\volumetracker\volumetracker\node_modules\express\lib\response.js:900:7) @ \elasticsearch\es\volumetracker\volumetracker\routes\index.js:22:13 @ \elasticsearch\es\volumetracker\volumetracker\crud_module\search.js:45:9 @ trycallone (\elasticsearch\es\volumetracker\volumetracker\node_modules\elasticsearch\node_modules\promise\lib\core.js:37:12) @ \elasticsearch\es\volumetracker\volumetracker\node_modules\elasticsearch\node_modules\promise\lib\core.js:123:15
i posting here answer own question, in case needs same thing. pass flash message view, in app.js ensure following present (note using ejs template view) :
var express = require('express'); var path = require('path'); var cookieparser = require('cookie-parser'); var bodyparser = require('body-parser'); var app = express(); var flash = require('connect-flash'); var session = require('express-session'); app.use(cookieparser()); app.use(session({ secret: 'zxcv' })); // session secret app.use(flash()); // use connect-flash flash messages stored in session in index.js
router.post('/edit', function (req, res) { if (req.body.change == "update") { //if update btn clicked updatemodule.savechanges(req.body, function (err) { //call update module if (err) { //if error req.flash("msg","error occured"); res.locals.messages = req.flash(); res.render('edit', { title: 'myapp'}); } else { //on success req.flash("msg", "data updated successfully"); res.locals.messages = req.flash(); res.render('index', { 'title': 'myapp'}); } }); } }); and here view: editing--> edit.ejs
<body> <form action='/edit' method='post'> <!--your data--> <script language="javascript"> function updateconfirm() { var userpreference; if (confirm("do want save changes?") == true) { return true;} else { return false;} } </script> <button type="submit" class="btn btn-info" name="change" value="update" onclick= "<%- "return updateconfirm()" %>" > save changes </button> </form> </body> here, if click on button, first popup confirmation alert box (will call updateconfirm()), , if click yes submit form. now, after updating passing flash message index.js. view want show flash message, put this:
<% if (locals.messages) { %> <script language="javascript"> alert("<%= messages.msg %>"); </script> <% } %> it show message in alert box. p.s: have install these npm packages: cookie-parser,connect-flash , connect-flash
Comments
Post a Comment