Search code examples
node.jsexpressmaterializeexpress-handlebars

how to use materialize toast in node app

I have a node/express app. on the front-end I am using materialize css and I wanted to use the toast feature from it when my user logs out.

Following is the code for my logout route:

// logout user
router.get('/logout', (req, res) => {
    req.logout();
    req.flash('success_msg', 'You are logged out');
    res.redirect('/');
});

and I want to use something like the following when my user logs out:

 M.toast({html: 'I am a toast!'})

I have a partial called _msg.handlebars in which I have defined the sections for errors and success messages which are captured by global variable in my server.js:

{{#if success_msg}}
<div class="alert alert-success">{{success_msg}}</div>
{{/if}} {{#if error_msg}}
<div class="alert alert-danger">{{error_msg}}</div>
{{/if}} {{#if error}}
<div class="alert alert-danger">{{error}}</div>
{{/if}}

Global variables in server.js file:

// Global variables
app.use(function (req, res, next) {
    res.locals.success_msg = req.flash('success_msg');
    res.locals.error_msg = req.flash('error_msg');
    res.locals.error = req.flash('error');
    res.locals.user = req.user || null;
    next();
});

So instead of show text or alert, I want to use the materialize css toast.

Please advise!

Solution

  • I modified my _msg.handlebars as follows:

    {{#if success_msg}}

<body onload="M.toast({html: '{{success_msg}}'})">

</body>
{{/if}} {{#if error_msg}}

<body onload="M.toast({html: '{{error_msg}}'})">

</body>
{{/if}} {{#if error}}

<body onload="M.toast({html: '{{error}}'})">

</body>
{{/if}}

    Working perfectly so far but if there is a better suggestion please do advise.