Develop Reference

How do I render a handlebars layout in node.js from a button?

This is a really weird issue I am having.
I have a login form, this login form verifies your data and renders the Profile layout if the login is successful OR renders the register page if the login is not.
exports.logIn = function (req, res, data) {
var username = req.body.username.toString();
var password = req.body.password.toString();
connection.connection();
global.connection.query('SELECT * FROM Utilizador WHERE Nome_Utilizador = ? LIMIT 1', [username], function (err, result) {
if (result.length > 0) {
if (result) {
var object = JSON.parse(JSON.stringify(result));
var userObject = object[0];
var userQ = object[0].Nome_Utilizador;
global.connection.query('SELECT Password_Utilizador from Utilizador where Nome_Utilizador = ?', [username], function (err, result) {
console.log(result);
if (result.length > 0) {
if (result) {
var object2 = JSON.parse(JSON.stringify(result));
var passQ = object[0].Password_Utilizador;
if (password == passQ) {
console.log("Login efectuado com sucesso");
console.log(userObject);
res.render('home', { title: 'perfil', layout: 'perfil', data: userObject });
} else {
console.log("1");
}
}
} else if (err) {
console.log("asdsadas");
} else {
console.log("2");
res.render('home', { title: 'perfil', layout: 'registo' });
}
});
}
} else if (err) {
console.log(err);
} else {
console.log("Utilizador nao encontrado");
res.render('home', { title: 'perfil', layout: 'registo' });
}
});
};
This works.
And the only reason why it does work is because it comes from a FORM with a METHOD and an ACTION
<form id="login-nav" action="/login" method='POST' role="form" accept-charset="UTF-8" class="form">
<div class="form-group">
<label for="username" class="sr-only">Utilizador</label>
<input id="username" type="username" placeholder="Nome de utilizador" required="" class="form-control" name="username">
</div>
<div class="form-group">
<label for="exampleInputPassword2" class="sr-only">Palavra-Passe</label>
<input id="password" type="password" placeholder="Meta a palavra-passe" required="" class="form-control" name="password">
</div>
<div class="checkbox">
<label></label>
<input type="checkbox">Gravar Dados
</div>
<div class="form-group">
<button id="botaoLogin" class="btn btn-danger btn-block">Fazer Login</button>
</div>
</form>
However, I tried to do the same thing with jQuery, as I need to render a Handlebars layout for some products on button click,
$("#pacotes").on('click', ".produto", function () {
var prod = this.id;
console.log(prod);
$.get("http://localhost:3000/pacote?idPacote=" + prod);
});
And despite the query working and giving me the data I requested
exports.Pacote = function (req, res) {
var pacote = req.query.idPacote;
connection.connection();
global.connection.query('SELECT * FROM Pacotes WHERE idPacotes = ? ', [pacote], function (err, result) {
if (result.length > 0) {
if (result) {
var object = JSON.parse(JSON.stringify(result));
var packObject = object[0];
console.log(result);
res.render('home', { title: 'pacote', layout: 'pacote', data: packObject });
} else if (err) {
console.log(err);
}
};
});
}
It simply doesn't render the layout and I have no idea why.
What is the difference between doing a POST request like this or doing it by a form?
I don't understand why this only seems to work with forms.
I could solve it that way, but I don't think using empty forms for all my buttons would be a viable solution.

You are only making a request, you are not processing the return value:
$.get("http://localhost:3000/pacote?idPacote=" + prod);
Try changing to something like:
$.ajax({
method: 'GET',
url: "http://localhost:3000/pacote?idPacote=" + prod,
success: function(...) {...}
});

Sending array field between HTML and Node JS

I'm trying to send a simple form from my HTML page to my Node JS server. The problem is that: I have a field that needs to be incresed by the user, so I'm using an array to express it. Everything OK but the array field appears like a String inside my JSON Object on the Server.
Here is the output from the Server:
{
nomeEquipe: 'Team',
nomeLider: 'Team Lider',
emailEquipe: 'email#email.com',
matriculaLider: '10101010',
senhaLider: '001001001',
'part[0].nome': 'Partner',
'part[0].matricula': '666',
'part[0].email': '666#email.com'
}
I can't access the part Array. The part Array can be incresed...
index.ejs (The form and the script):
<form method="post" action="/cadastrar">
<input type="text" name="nomeEquipe" placeholder="Nome da Equipe"><br>
<input type="text" name="nomeLider" placeholder="Lider da Equipe"><br>
<input type="email" name="emailEquipe" placeholder="Email do Lider"><br>
<input type="number" name="matriculaLider" placeholder="Matricula do Lider"><br>
<input type="password" name="senhaLider" placeholder="Senha de Login"><br><br>
<input type="text" name="part[0].nome" placeholder="Nome do participante">
<input type="number" name="part[0].matricula" placeholder="Matricula do participante">
<input type="email" name="part[0].email" placeholder="Email do participante">
<div id="participante"></div>
<br>
<button type="button" onclick="addParticipante()">Adicionar</button>
<button type="button" onclick="delParticipante()">Remover</button>
<br><br>
<button type="submit">Cadastrar</button>
</form>
<script>
var cont = 1;
function addParticipante() {
var div = document.createElement('div');
div.className = 'participante';
div.innerHTML = '<input type="text" name="part['+cont+'].nome" placeholder="Nome do participante"><input type="number" name="part['+cont+'].matricula" placeholder="Matricula do participante"><input type="email" name="part['+cont+'].email" placeholder="Email do participante">';
document.getElementById('participante').appendChild(div);
cont++
}
function delParticipante() {
var select = document.getElementById('participante');
document.getElementById('participante').removeChild(select.lastChild);
cont--
}
</script>
The Server side (Routes):
var express = require('express');
var router = express.Router();
var equipe = require('./../models/Equipe')();
router.get('/', function(req, res, next) {
res.render('index', { title: 'Gincana' });
});
router.get('/cadastrar', (req, res, next) => {
equipe.find({}, (err, models) => {
if(err) console.log(err)
else res.json(models)
});
});
router.post('/cadastrar', validador, (req, res, next) => {
var model = req.body;
res.send(model);
});
function validador(req, res, next) {
var model = req.body;
console.log(model);
next()
}
module.exports = router;
Thanks a lot!

Change naming of your element. It should be part[][]
<input type="email" name="part[0][email]">
Than you will have array like
{part:[
0: {
nome: 'Partner',
matricula: '666',
email: '666#email.com'
}
]}

Node JS Express - updating documents

Ive achieved a retrieve via http://localhost:3000/update2?buyerID=2299 which fetch the particular document.
When i press submit it redirects to the /orders page from where i can view all the records and there current fields.
If i change one the fields in retrieve and click submit it doesn't update the document Its the same as before.
1 of 5 JSON Documents- http://prntscr.com/dilrb0
JS FILE
router.get('/update2', function(req, res) {
var buyerID = req.query.buyerID;
if (!buyerID || !parseInt(buyerID)) {
res.render('error', {message: "You need to enter an ID to update a specific order", error:{status:"", stack: ""}});
} else {
mongoClient.connect(url, function (err, db) {
if (err) {
res.render('error', {message: "Failed to connect to MongoDB",error:{status:"", stack: ""}});
} else {
var WishList = db.collection('orders');
WishList.findOne({"buyerID": parseInt(buyerID)}, function(err, result) {
if (err || !result || result.length == 0) {
res.render('error', {message: "Failed to find order",error:{status:"", stack: ""}});
} else {
res.render('updateOrder2', {qs: result});
}
})
}
});
}
});
router.post('/update2', function(req, res) {
var buyerID = req.query.buyerID;
if (!buyerID || !parseInt(buyerID)) {
res.render('error', {message: "Failed to update order make sure the ID is current", error:{status:"", stack: ""}});
} else {
mongoClient.connect(url, function (err, db) {
if (err) {
res.render('error', {message: "Failed to connect to MongoDB", error:{status:"", stack: ""}});
} else {
var WishList = db.collection('orders');
var order = {
buyerID: req.body.buyerID,
gender: req.body.gender,
student: req.body.student,
pName: req.body.pName,
type: req.body.type,
purchaseDate: req.body.purchaseDate,
price: req.body.price,
sName: req.body.sName
};
console.log("Updating..", order)
WishList.updateOne({"buyerID": parseInt(buyerID)}, {$set: order}, function (err, result){
if (err) {
console.log("Cannot update", err)
} else {
console.log("Updated..", order)
res.redirect("/orders")
}
})
}
});
}
});
EJS
<!DOCTYPE html>
<html>
<head>
<title>Update Recipe</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form name= "updateOrder" action="/updateOrder" method="POST">
User ID:<br>
<input type="text" name="buyerID" value = "<%=qs.buyerID%>" required ="required"><br>
Gender:<br>
<input type="text" name="gender" value = "<%=qs.gender%>" required ="required"><br>
Student?:<br>
<input type="text" name="student" value = "<%=qs.student%>" required ="required"><br>
Product ID:<br>
<input type="text" name="productID" value = "<%=qs.productID%>" required ="required"><br>
Product Name:<br>
<input type="text" name="pName" value = "<%=qs.pName%>" required ="required"><br>
Product Type:<br>
<input type="text" name="type" value = "<%=qs.type%>" required ="required"><br>
Date Purchased:<br>
<input type="text" name="purchaseDate" value = "<%=qs.purchaseDate%>" required ="required"><br>
Product Price:<br>
<input type="text" name="price" value = "<%=qs.price%>" required ="required"><br>
Seller Name:<br>
<input type="text" name="sName" value = "<%=qs.sName%>" required ="required"><br>
<br><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>

I'm actually confused by the fact that you're still using req.query.buyerID instead of req.body.buyerID at the start of your .post() but that the code does apparently still reach res.redirect("/orders"); For starters, in your updateOne, try replacing parseInt(buyerID) with parseInt(order.buyerID) – Chris G 10 hours ago

Super slow post request to NodeJS server

I am trying to do a Post request to my NodeJs server using PostMan and the terminal, but it seems the request never ends.
I have a website and a form, and I try to send the form by using Ajax. I do the same thing in other file except the fact that the other file does not contain a form and the post works.
This is my html form:
<div class="team">
<img class="teamInfo" src="images/leaderboard.png">
<p class= "createT"> Create a Team </p>
<p class= "chooseC"> Choose a Charity </p>
<p class= "enter"> Enter Team Member's Email</p>
<p class= "upload">Upload your Company<br>or Team's Logo</p>
<!-- added action tag solved the 405 error : "post method not allowed"-->
<form id="create_team_form" action="/" method="post">
<input class="teamName" type="text" id="teamName" name="teamName" size="25" maxlength="60" value="Team Name">
<input class="companyName" type="text" id="companyName" name="companyName" size="25" maxlength= "60" value="Company Name">
<input class="teamDescription" type="text" id="teamDescription" name="teamDescription" size="25" maxlength= "60" value="Team Description">
<input class= "email" type="text" id="email" name="email" size="25" maxlength= "60" value="emails">
<input class="searchCharity" type="text" id="charityName" name="charityID" size ="25" maxlength="60">
<p class="click"> Click the charity's name to select who your team will run for!</p>
<input class="greenButton" type="button" onclick="createTeam();" value="Create My Team!">
</form>
<img class="img-box" src="images/imgBox.png" alt=""/>
</div>
This is my javascript ajax to send the form to the server:
function createTeam(){
var teamN= document.getElementById("teamName").value;
var companyName =document.getElementById("companyName").value; //maybe not, tae it off.
var charityName = document.getElementById("charityName").value;
if((teamN.trim() === "") || (companyName.trim() === "") || (charityName.trim() === ""))
{
alert("You did not fill the team Name or companyName, Please enter with a name");
}else{
var sessionID = $.cookie("sessionID")
$.ajax({
type: "POST",
url: "http://xxx.xxxx.xxx.x:9000/team/?sessionID="+sessionID,
data: $("#create_team_form").serialize(),
success: function(msg) {
alert("team supposedly saved")
$.cookie("teamID",msg.teamID)
$.cookie("sessionID",sessionID)
//window.location.href='teamCreated.html'
}
});
}
}
It goes inside the if, but the else is just slow. I don't know if the data is being sent. I could not save a document so far in my mongodb.
This is my team.js in the server:
var express = require('express');
var sha1 = require('sha1');
var router = express.Router();
var sessionOBJ = require('./session');
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
router.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT, GET,POST");
});
var teamSchema = new Schema({
teamID: String,
teamName: String,
teamDescription: String,
teamAdminID: String,
teamLink: String,
charityID: String
});
var teamModel = mongoose.model('teams',teamSchema);
router.post('/', function (req, res){
log.d("Entrou no method post");
var sessionID = req.query.sessionID
var team = req.body;
var teamName = team.teamName;
var teamDescription = team.teamDescription;
var charityID = team.charityID;
var teamLink = team.teamLink;
sessionOBJ.isAuthorized(sessionID, function(sessionID){
log.d("Checking session to save team", sessionID);
var adminID = sessionID.userID;
var newTeam = new teamModel({
teamName: teamName,
teamDescription: teamDescription,
teamAdminID: adminID,
teamLink: teamLink,
charityID: charityID
});
newTeam.save(function(err, team){
if(err) return console.error(err);
res.send({"status" : "Created", "teamID" : team._id, "teamAdminID":team.teamAdminID });
log.d("Created Team ID", team._id)
log.d("XXXXXXX XXXXXX XXXXXXX Team Saved inside save method",team);
});
});
})
}
Does someone can see what I am doing wrong?
Thanks in advance.

After res.send() call res.end(). response.end tells the server that the entire message has been sent and can close the connection, otherwise, it'll wait for more data.
source:
https://nodejs.org/api/http.html#http_response_end_data_encoding_callback

can't submit a form while clicking submit button in EJS

Hi guys i ran into a problem that i don't understand why, it is very strange or maybe i write the code wrongly so i hope you guys can point out the mistake or enlighten me .
so i was trying to submit a form to my database and before submit the form the validate function will validate the data, if there's an error it will notify the user
when i click submit button the form cannot be submitted and nothing happened, no error in terminal , no error on console , nothing ( it looks like you click on <button> inside a form, while the form is expecting <input type="submit"> to submit the form>
here's the full code https://github.com/johnlim5847/form-test
App.js ( i think nothing wrong in here)
var express = require('express'),
app = express(),
http = require('http'),
path = require('path'),
MongoClient = require('mongodb').MongoClient,
routes = require('./routes'),
passport = require('passport');
MongoClient.connect('mongodb://localhost:27017/test', function(err, db) {
"use strict";
if(err) throw err;
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'ejs');
app.use('/static', express.static(path.join(__dirname, 'public')));
app.use(express.cookieParser());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.session({ secret: 'Super Duper Awesome Duck' }));
app.use(passport.initialize());
app.use(passport.session());
app.use(app.router);
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
routes(app, db);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
});
routes/index.js
var SessionHandler = require('./session');
module.exports = exports = function(app, db) {
var sessionHandler = new SessionHandler(db);
app.use(sessionHandler.isLoggedInMiddleware);
// Signup form
app.post('/register', sessionHandler.handleSignup);
app.use(function (req,res) {
res.status(404).render('error', {
url: req.originalUrl
});
});
app.get('*',function(req, res){
res.render('master', { title: 'form' });
});
}
routes/session.js
var UsersDAO = require('../users').UsersDAO
, SessionsDAO = require('../sessions').SessionsDAO;
/* The SessionHandler must be constructed with a connected db */
function SessionHandler (db) {
"use strict";
var users = new UsersDAO(db);
var sessions = new SessionsDAO(db);
function validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors) {
"use strict";
var USER_RE = /^[a-zA-Z0-9_-]{2,25}$/;
var PASS_RE = /^.{6,100}$/;
var EMAIL_RE = /^[\S]+#[\S]+\.[\S]+$/;
errors['publicUsername_error'] = "";
errors['password_error'] = "";
errors['confirmPassword_error'] = "";
errors['email_error'] = "";
errors['confirmEmail_error'] = "";
if (!USER_RE.test(publicUsername)) {
errors['publicUsername_error'] = "Try just letters and numbers, e.g: Ed, 69, Kelvin and etc";
return false;
}
if (!PASS_RE.test(password)) {
errors['password_error'] = "Password must be at least 6 characters long";
return false;
}
if (password != confirmPassword) {
errors['confirmPassword_error'] = "Password must match";
return false;
}
if (!EMAIL_RE.test(email)) {
errors['email_error'] = "Invalid email address";
return false;
}
if (email != confirmEmail) {
errors['confirmEmail_error'] = "Email must match";
return false;
}
return true;
}
this.handleSignup = function(req, res, next) {
"use strict";
var email = req.body.email,
confirmEmail = req.body.confirmEmail,
password = req.body.password,
confirmPassword = req.body.confirmPassword,
firstName = req.body.firstName,
lastName = req.body.lastName,
penName = req.body.penName,
publicUsername = req.body.publicUsername;
// set these up in case we have an error case
var errors = {'email': email,'publicUsername': publicUsername,'firstName': firstName,'lastName': lastName,'penName': penName}
if (validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors)) {
users.addUser(email, password, firstName, lastName, penName, publicUsername, function(err, user) {
"use strict";
if (err) {
// this was a duplicate
if (err.code == '11000') {
errors['email_error'] = "Email already in use. Please choose another";
return res.render("register", errors);
}
// this was a different error
else {
return next(err);
}
}
sessions.startSession(user['_id'], function(err, session_id) {
"use strict";
if (err) return next(err);
res.cookie('session', session_id);
return res.redirect('/');
});
});
} else {
console.log("user did not validate");
return res.render("register", errors);
}
}
}
register.ejs
<div class="pure-u-1 text-center">
<form method="post" class="pure-form pure-form-aligned">
<fieldset>
<legend><h1 class="pure-splash-subhead midnightblue"><span class='lightblue'>Join</span> us today and start write things that <span class='maroon'>matter</span></h1>
</legend>
<p class="text-center red">{{email_error}}</p>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input required name="email" class="pure-u-1-3" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<p class="text-center red">{{confirmEmail_error}}</p>
<label for="confirmEmail">Confirm Email Address</label>
<input required name="confirmEmail" class="pure-u-1-3" type="email" placeholder="Confirm Email Address">
</div>
<div class="pure-control-group">
<p class="text-center red">{{password_error}}</p>
<label for="password">Password</label>
<input required name="password" class="pure-u-1-3" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<p class="text-center red">{{confirmPassword_error}}</p>
<label for="confirmPassword">Confirm Password</label>
<input required name="confirmPassword" class="pure-u-1-3" type="password" placeholder="Confirm Password">
</div>
<br/>
<br/>
<div class="pure-control-group">
<label for="firstName">First Name</label>
<input required name="firstName" class="pure-u-1-3" type="text" placeholder="Your first name">
</div>
<div class="pure-control-group">
<label for="lastName">Last Name</label>
<input required name="lastName" class="pure-u-1-3" type="text" placeholder="and your last name">
</div>
<div class="pure-control-group">
<label for="penName"><abbr title="A pen name, nom de plume, or literary double, is a pseudonym adopted by an author. The author's real name may be known to only the publisher, or may come to be common knowledge.">Nom de plume</abbr></label>
<input required name="penName" class="pure-u-1-3" type="text" placeholder="Pen Name eg:J.R.R. Tolkien">
</div>
<div class="pure-control-group">
<label for="publicUsername">Public Username</label>
<input required name="publicUsername" class="pure-u-1-3" type="text">
<p class="text-center red">{{publicUsername_error}}</p>
</div>
<div class="pure-u-1 ">
<label for="conAndTerm" class="pure-checkbox">
<input id="conAndTerm" type="checkbox"> I've read the <a class='link blue'href="#">terms and conditions</a>
</label>
<br/>
<input type='submit'class="pure-button pure-button-secondary pure-u-1-3" value="Register">
<br/>
</div>
</fieldset>
</form>
</div>
i think it might be a silly mistake i hope there's nothing wrong with my HTML tag LOL

ok, so after short debugging session:
taken from Angular's docs
Since the role of forms in client-side Angular applications is
different than in classical roundtrip apps, it is desirable for the
browser not to translate the form submission into a full page reload
that sends the data to the server. Instead some javascript logic
should be triggered to handle the form submission in an
application-specific way.
For this reason, Angular prevents the default action (form submission
to the server) unless the element has an action attribute
specified.
so it seems like you did not provide proper handling for form submit :-)
so either provide one or add the 'action' attribute to the form - that should "fix" it
let me know if that makes sense to you.

You're missing the action attribute inside your form tag in register.ejs
It should be as following
<form method="post" action="/user/register" class="pure-form pure-form-aligned">
Now upon hitting "submit" a POST request will be generated and server shall look for a post type of route mentioned in action.
Another thing that's wrong with your code is ... you need to declare SessionHandler function using "exports" keyword as mentioned below.
exports.SessionHandler = async (req, res, next) => {
// Session handler with arrow function
}
OR
exports.SessionHandler = async function (req, res, next) {
// Session handler without arrow function
}

I believe you need a space so that type='submit'class becomes: type='submit' class.