Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to show Flash message in express.js using node.js?

express-flash

Flash is an extension of connect-flash. Connect-flash is a module for Node.js. it is used to show flash message whenever action is done.

npm install express express-session connect-flash --save

express is required by the connect-flash library to run. We are using express-session so that a session can be created whenever a message is flashed and the user is redirected to the specified page.

flash messages that work with rendering or redirecting.

var flash = require('express-flash');
########################### OR ###############
const flash = require('connect-flash');

Example

File Name :

const express = require('express');
const session = require('express-session');
const flash = require('connect-flash');

const app = express();

const port = process.env.PORT || 3000;

app.use(session({
secret:'mahi',
saveUninitialized: true,
resave: true
}));

app.use(flash());

app.get('/', (req, res) => {
req.flash('message', 'Success Message!!');
res.redirect('/afterlogin');
});

app.get('/afterlogin', (req, res) => {
res.send(req.flash('message'));
});

app.listen(port, (err) => {
if (err) console.log(err);
console.log('Server Error', port);
});

In above Example, defining a session-secret is used for our sensitive information is encrypted and SaveUninitialized prevents the browser from using empty sessions. connect-flash module is called by using app.use(flash()).

We are defining a route / , which will first flash(display) the specified message and then redirects the user to /afterlogin route. The /afterlogin will show the specified message on the web-page.

var flash = require('express-flash-messages')
app.use(flash())

app.get('/', function(req, res){
req.flash('notify', 'notification message')
res.render('index')
})

app.get('/redirect', function(req, res){
req.flash('notify', 'successfully redirected to page!')
res.redirect('/')
})

the app.all() method maps to /express-flash. Request baseurl/express-flash to create a message using the req.flash(type, message)

app.all('/express-flash', req, res ) {
req.flash('success', 'My flash message.');
res.redirect(301, '/');
}

Next map the message to the template in the res.render() method of the target route, baseurl/. Here the req.flash(type) getter method returns the message or messages matching the type, success, which are mapped to the template variable, expressFlash.

app.get('/', req, res ) {
res.render('index', {expressFlash: req.flash('success') });
}

File Name :

Finally, display the value of expressFlash, if it exists, in index.ejs.

<p> Express-Flash Demo </p>
<% if ( expressFlash.length > 0 ) { %>
<p>Message: <%= expressFlash %> </p>
<% } %>

File Name :

<% if ( message ) { %>
<div class="flash"><%= message %></div>
<% } %>

File Name :

var message = $( '.message' );
if ( message.length ) {
setTimeout( function() {
message.fadeOut( 'slow' );
}, 5000 );
}

File Name :

req.flash() can be used in two ways.

If you use two arguments

req.flash(type, message);
where type is a type of message and message is actual message (both strings), then it adds message to the queue of type type. Using it with one argument

req.flash(type);

show message on view page

<% if(message.success){ %>
<div class="alert alert-success" role="alert">
<%= message.success %>
</div>
<% } %>

alert Message

<% if(success && success.length) {%>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<%= success %>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<% } %>

<% if(error && error.length) {%>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<%= error %>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<% } %>

app.use((req, res, next) => {
res.locals.success = req.flash('success');
res.locals.error = req.flash('error');
next();
});
Here, we are using Express middleware so that both req.flash(‘success’) and req.flash(‘error’) are available everywhere across our application.





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link