Why is 'message' undefined regarding connect-flash?

Question

I'm building an express app where when a user completes a form; if successful, they will see an alert confirming their submission.

In my server.js file, I am declaring

var cookieParser = require("cookie-parser"),
session = require("express-session"),
flash = require("connect-flash"),
app = express();

Followed by:

app.use(cookieParser("keyboard cat"));
app.use(session({ 
    cookie: { maxAge: 60000 },
    secret: "keyboard cat" 
}));
app.use(flash());
require("./server/config/routes.js")(app);`

My routes file:

app.get("/", function(req, res){
    res.render("index", { message: req.flash("success") });
});

app.post("/sendMsg", function(req, res){
    mainController.sendMsg(req, res);
});

app.get("/sentSuccess", function(req, res){
    req.flash("success", "Thanks!");
    res.redirect("/");
});

Finally in my main.js file for jquery calls (I'm using SweetAlert for alert styling):

$(document).ready(function(){
if(message){
    var frm = document.getElementsByName('msgForm')[0];
    swal({
        title: "Sweet!",
        text: "Thanks",
        imageUrl: "javascripts/sweetalert/thumbs-up.jpg"
    });
    frm.reset();
}
});

The issue I'm hitting is Uncaught ReferenceError: message is not defined on the client-side console. I've read through https://www.npmjs.com/package/connect-flash and looked through the example at https://github.com/jaredhanson/connect-flash/tree/master/examples/express3 but I'm not sure why message is not being passed back.

According to [this](http://expressjs.com/api.html#res.render) it looks like `message` will be passed to the view. You might need to select the element first with JQuery before referencing it. — pushkin, Aug 01 '15 at 03:00
It looks like @trquoccuong has the right approach more or less. See [this](http://expressjs.com/api.html#app.locals) or [this](http://stackoverflow.com/questions/10919650/accessing-express-js-local-variables-in-client-side-javascript). — pushkin, Aug 01 '15 at 03:02

score 2 · Answer 1 · answered Aug 01 '15 at 02:57

2

Add a middleware :

app.use(flash());
app.use(function(req, res, next){
  res.locals.messages = req.flash();
  next();
});

Then use messages at frontend

answered Aug 01 '15 at 02:57

trquoccuong

2,857
2
20
26

score 0 · Accepted Answer · answered Aug 02 '15 at 06:54

Maybe, the problem is with the way your code is trying to access the message variable. As @Pushkin said message will be passed to the view and can't be as such referenced by the javascript.

You can try this (in case you are using jade as view engine)

    if message
      .script
        // your javascript or function()

So finally code looks like :

if message
    .script
        var frm = document.getElementsByName('msgForm')[0];
            swal({
                title: "Sweet!",
                text: "Thanks",
                imageUrl: "javascripts/sweetalert/thumbs-up.jpg"
            });
            frm.reset();

Now you will be able to access the message variable.

In case if using ejs the syntax is almost similar

<% if (message) { %>
 // Do something here..
<% } %>

Thanks! This was totally it. I am using ejs so I had to wrap a script tag & function in `<% if (message) { %> ...`. However, I ran into another issue where since my route for index was getting passed `message: req.flash("success")` it was automatically firing the script. My fix for that was to add in the following: `message: "undefined"`; then move the actual req.flash("success") parameter to my app.get("/sentSuccess") route and have that `res.render("index", {message: req.flash("success")});` and finally on my index view add in: `<% if(message != "undefined"){ %>`. — sseeaann, Aug 02 '15 at 17:52

Why is 'message' undefined regarding connect-flash?

2 Answers2