Noeud - EJS - Affichage du message toastjs

J'essaie d'afficher un message toast en utilisant la bibliothèque ToastrJS. L'affichage du message est correct. Le problème est que je ne trouve pas un moyen de passer le message d'erreur. J'utilise connect-flash pour faire des flash-messages, et ensuite je veux passer le message au grille-pain.Noeud - EJS - Affichage du message toastjs

Mon code EJS:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title><%=title%></title> 
    <link rel="stylesheet" href="/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="/stylesheets/nav-bar.css"> 
    <link rel="stylesheet" href="<%=style%>"> 
    <link rel="stylesheet" href="/js/aos.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script> 
    </head> 
    <body > 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Joobber</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
      <li class=""><a href="#">Home</a></li> 
      <li><a href="#">Ver todas as vagas</a></li> 
      <li><a href="#">Vagas por categoria:</a></li> 

      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Ainda não está cadastrado?</a></li> 
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Logar</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

    <% if(success.length > 0){ %> 
     <script> 
     toastr.success('WANNA USE THE ERROR MESSAGE VARIABLE HERE!!!!') 
     </script> 
    <% } %> 

    <script type="text/javascript" src="js/aos.js"> 

    </script> 
    <script type="text/javascript"> 
    AOS.init({ 
     offset: 200, 
     duration: 600, 
     easing: 'ease-in-sine', 
     delay: 100, 
     }); 
    </script>

J'ai également connecter flash configuré et utilisé certaines variables sections locales pour définir le type spécifique de messages

app.use(flash()); 
var sessionFlash = function(req, res, next) { 
    res.locals.currentUser = req.user; 
    res.locals.error = req.flash('error'); 
    res.locals.success = req.flash('success'); 
    next(); 

} 
app.use(sessionFlash)

Et puis, mes itinéraires:

const express = require('express') 
const router = express.Router() 
const indexControllers = require('../controllers/indexControllers') 


router.get('/', indexControllers.HomePage) 

router.get('/signup', indexControllers.Signup) 

router.get('/test', (req, res)=>{ 
    req.flash('success', 'user succesfulyl registered') 
    res.redirect('/') 
}) 

module.exports = router;

Source

2017-06-04 Gustavo Dias

Si vous voulez afficher toastr avec erreur et message en utilisant une phrase puis en utilisant toastr.info. Si non, mieux vaut séparer le succès du message d'erreur pour avoir un contexte plus clair. Et utilisez-le comme ceci:

<% if(success.length > 0){ %> 
    <script> 
    toastr.success(`${success[0]}`) 
    </script> 
<% } %> 
<% if(error.length > 0){ %> 
    <script> 
    toastr.error(`${error[0]}`) 
    </script> 
<% } %>

Source

2017-06-05 01:10:16 minhtran612

Merci! mais, juste pour compléter votre réponse. Votre code n'a pas fonctionné, mais juste changé '' $ {succès [0]} 'à <%=success%> avec l'interpolation et a fonctionné. Aussi, merci beaucoup! –

Noeud - EJS - Affichage du message toastjs

Répondre

Questions connexes