Как мне добавить Sweetalert на мой файл EJS успешного вывода? - PullRequest
1 голос
/ 15 мая 2019

У меня есть файл nodejs, который отображает один из файлов ejs, мне нужно отобразить предупреждение ssweet о моем успешном рендеринге? В настоящее время я получаю сообщение об ошибке, которое показывает, что предупреждение не определено ЭТО МОЙ EJS COE

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<link rel='stylesheet' href='cdnjs.cloudflare.com/ajax/…'> 
<link rel="stylesheet" href="/css/style.css" type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script> 
</head> 
<body> 
<div class="verify"> 
<form id="checkForm" method="post" action="/verify"> 
<label for="verify"><b>Verify</b></label> 
<input type="text" placeholder="Register no" name="emply_id" required> 
<button type="submit" class="signupbtn">Check In</button> 
</form> 
</div> 
<!--<form id="signp" method="get" action="/signup"> 
<button type="submit" class="signupbtn" >Signup</button> 
</form>--> 

<div class="container" id="container"> 
<div class="form-container sign-up-container"> 
<form id="signupForm" method="post" action="/signup"> 
<h1>Create Account</h1> 
<div class="social-container"> 
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a> 
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a> 
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a> 
</div> 
<span>or use your email for registration</span> 
<input type="text" placeholder="Company Name" name="name"required/> 
<input type="email" placeholder="Email" name="email" required/> 
<input type="password" placeholder="Password" name="psw" required/> 
<input type="password" placeholder="Re-Password" name="pswrepeat" required/> 
<input type="address" placeholder="Addresss" name="address" required/> 

<button id="myButton">Sign Up</button> 
</form> 
</div> 
<div class="form-container sign-in-container"> 
<form id="loginForm" method="post" action="/login"> 
<h1>Sign in</h1> 
<div class="social-container"> 
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a> 
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a> 
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a> 
</div> 
<span>or use your account</span> 
<h1>Log in </h1> 
<hr> 
<label for="email"><b>email</b></label> 
<input type="text" placeholder="Email" name="email" required > 
<label for="password"><b>password</b></label> 
<input type="text" placeholder="Enter Password" name="password" required> 
<button type="submit" class="signupbtn">Log in</button> 
</form> 
</div> 

<div class="overlay-container"> 
<div class="overlay"> 
<div class="overlay-panel overlay-left"> 
<h1>Welcome Back!</h1> 
<p>To keep connected with us please login with your personal info</p> 
<button class="ghost" id="signIn">Sign In</button> 
</div> 
<div class="overlay-panel overlay-right"> 
<h1>Hello, Friend!</h1> 
<p>Enter your personal details and start journey with us</p> 
<button class="ghost" id="signUp">Sign Up</button> 
</div> 
</div> 
</div> 
</div> 


<script src="/js/index.js"></script> 

<script> 

$(document).ready(function () { 
if ("<%= alert %>" === "true") { 
var alertTitle = "<%= alertTitle %>" 
var alertMessage = "<%= alertMessage %>" 
swal(alertTitle, alertMessage, "error"); 
} 
}) 





</script> 


</body> 
</html>

ЭТО МОЙ НОДЕЙСКИЙ КОД

app.post('/signup',urlencodedParser,async function(req,res){ 
//console.log(req) 
var name1 = req.body.name; 
var email1 = req.body.email; 
var pass = req.body.psw; 
var con_pass = req.body.pswrepeat; 
var address1 = req.body.address; 
var stat =0; 
var echeck = await emailcheck(email1) 
console.log(echeck) 
var sig ={name:name1,email:email1,password:pass,password1:con_pass,address:address1,status:stat} 
console.log(name1); 
if(con_pass == pass){ 
var cd = sha256(email1) 
//res.end("sigup submitted"); 
//res.render('login'); 

var query = db.query('INSERT INTO signup SET ?', sig, async function(err, result) { 
// Neat! 

console.log(query.sql); 
var activationinsert = await activation_insert(cd) 
console.log(activationinsert) 
var link="http://"+req.get('host')+"/emaillogin?code="+cd; 
var actmail = await activation_mail(email1,link) 
console.log(actmail) 
console.log("get me sweet"); 
res.render('login', {alert: true, alertTitle: "Oops!", alertMessage: "Something went wrong!"})  

// }); 
}); 

Я использовал этот метод, этот метод тегов отлично работает в html, но когда дело доходит до js, это полный беспорядок.

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Передача параметров в app.render будет доступна при отображении страницы в виде строк. Это также доступно внутри тегов <script>. Ваш код будет выглядеть так:

<!DOCTYPE html>
<html lang="en">
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      $(document).ready(function () {
        if ("<%= alert %>" === "true") {
          var alertTitle = "<%= alertTitle %>"
          var alertMessage = "<%= alertMessage %>"
          swal(alertTitle, alertMessage, "error");
        }
      })
    </script>
  </body>
</html>

enter image description here

0 голосов
/ 15 мая 2019

Несколько замечаний:

  1. Избегайте использования зарезервированных ключевых слов JS, таких как alert, это вызовет только головную боль и невидимые ошибки при увеличении кодовой базы.

  2. Вы используете правильный синтаксис для доступа к переменным везде, кроме условия if, в строке

if (alert === true) {

Попробуйте изменить это на:

if(<%= alert === true %>) {
...