1
votes

Comment utiliser sweetalert dans nodejs?

J'ai un code nodejs donné avec du code html, je veux afficher une douce alerte côté client, après avoir traité une fonction dans nodejs ?.

<!DOCTYPE html>
<html lang="pt_br">
<head>
</head>
<body>
    <h1 class="text-center title-1"> Cad </h1>
    <form action="/add" method="post">
        <input type="submit" value="Save"/>
    </form>
</body>
</html>

var express = require('express');
var router = express.Router();
const Swal = require('sweetalert2');

router.post('/add', function(req, res, next) {

    Swal('Hello world!');

});

node.js express ejs sweetalert2

2 commentaires

Sweet Alert est censé être utilisé dans le navigateur, pas sur le serveur, vous devez plutôt l'inclure dans votre code côté client.

Je le sais, mais comment, j'ai essayé ajax ... je veux connaître une autre méthode? @ M90

3 Réponses :

4
votes

Voici la seule façon d'afficher un swal popup

var express = require('express');
var router = express.Router();

router.post('/add', function(req, res, next) {

   res.json("Hello world!")
});


<!DOCTYPE html>
<html lang="pt_br">
<head>
</head>
<body>
    <h1 class="text-center title-1"> Cad </h1>
    <form id="form" action="#" method="post">
        <input type="submit" value="Save"/>
    </form>
</body>
</html>
<script>

//import JQuery from script
//import swal script

$("#form").on("submit", function(e){
e.preventDefault();

$.ajax({
  url: "/add",
  method: "post"
}).done(d=>{
  swal(e.responseJSON);
});
})
</script>

0 commentaires

2
votes

Ici, vous pouvez utiliser EJS

<% if (isAdded) { %>
 <script>
  Swal.fire(
     'Good job!',
     'Data saved',
     'success'
 )
</script>
<% } %>

Côté HTML

var express = require('express');
var router = express.Router();
router.post('/add', function(req, res, next) {
   res.status(201).render('new', { isAdded : true } );
});

0 commentaires

0
votes

Pour gérer cela, vous pouvez utiliser des paramètres de requête.

Voici donc ce que vous pouvez faire

Sur le serveur

    <script>
    var urlParams = new URLSearchParams(window.location.search);
    if(urlParams.has('success') && urlParams.get('success')){
    swal({
    title: "Failed",
    text: `${message}`, 
    icon: "error",
    button: "Okay",
    }).then(()=>{
        console.log(window.location.hostname)
    window.location.replace(window.location.origin + '/login');

    })
}

Du côté client (EJS)

var express = require('express');
var router = express.Router();
router.post('/login', (req, res)=>{
   res.redirect("/login?success=true&message=Logged In Successfully")
});

Cela s'affichera simplement swal. Et vous pouvez basculer la valeur de succès pour afficher les messages d'erreur et de réussite.

0 commentaires