How to pass function as variable in Express-handlebars - node.js

I am trying to pass a function as a variable and call that function using onclick=""
but the function is executing before passing.
Here is the code.
seminar.js
function getco(){
console.log('hello');
}
router.get('/add',(req,res)=>{
res.render('cms/seminar/add',{
getco:getco()
});
});
add.handlebars
<form action="/cms/seminar/add" method="post">
<div class="form-group">
<label for="sel1">Game Name of the Seminar</label>
<select class="form-control" id="seminar_gamename" name="seminar_gamename" required onclick="getco">
<option value="pubg">Pubg</option>
<option value="candy_crush">Candy Crush</option>
<option value="fortnite">Fortnite</option>
<option value="mortal_combat">Mortal Combat 11</option>
<option value="far_cry_city">Far Cry City Dowm</option>
<option value="fortnite">Fortnite</option>
<option value="prince_of_persia">Prince of Persia:The Forgotten Sand</option>
</select>
</div>
</form>
//But the result im getting is 'hello' without even clicking

As mentioned in the comment above you are directly calling the function instead of passing it to frontend.
Try removing () from getco
`function getco(){
console.log('hello');
}
router.get('/add',(req,res)=>{
res.render('cms/seminar/add',{
getco:getco
});
});`
This allows you to pass the method as a variable and then in frontend use,
onclick="getco()"

Related

Inserting argument with Jekyll

I am trying to insert the attribute "selected" into the first option (volvo) with Jekyll without writing anything in the form.
I guess I should do it with capture but don't get how it works for passing attributes.
cars.html
<html>
<body>
...
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
...
</body>
</html>

Standardize Dropdown's Selected Handlebars Helper

I'm facing the following challenge building some dropdowns with Handlebars.
Instead of modeling the dropdown's select this way:
<div class="form-floating col-3">
<select name="sport" class="form-select" id="floatingSelect">
<option {{selectedSport sport 'all'}} value="all">All</option>
<option {{selectedSport sport 'Hiking'}} value="Hiking">Hiking</option>
<option {{selectedSport sport 'Mountaineering'}} value="Mountaineering">Mountaineering</option>
<option {{selectedSport sport 'Climbing'}} value="Climbing">Climbing</option>
<option {{selectedSport sport 'Mountain biking'}} value="Mountain biking">Mountain biking</option>
</select>
<label for="floatingSelect">Sport</label>
</div>
<div class="form-floating col-2">
<select name="difficulty" class="form-select" id="floatingSelect">
<option {{selectedDifficulty difficulty 'all'}} value="all">All</option>
<option {{selectedDifficulty difficulty 'Easy'}} value="Easy">Easy</option>
<option {{selectedDifficulty difficulty 'Medium'}} value="Medium">Medium</option>
<option {{selectedDifficulty difficulty 'Hard'}} value="Hard">Hard</option>
<option {{selectedDifficulty difficulty 'Expert'}} value="Expert">Expert</option>
</select>
<label for="floatingSelect">Difficulty</label>
</div>
I would like to use the same helper for both of them, but I still don't know how to do it. (btw, ignore the fact that I should be using an {{#each}} for displaying the options :P)
The controller:
module.exports.list = (req, res, next) => {
const filters = req.query;
const { location, sport, difficulty } = req.query;
const criterial = Object.keys(filters)
.filter((key => filters[key] !== 'all'))
.reduce((criterial, filter) => {
if (filters[filter]) criterial[filter] = filters[filter];
return criterial;
}, {});
Route.find(criterial)
.then(routes => {
res.render('routes/list', { routes, location, sport, difficulty })
})
.catch(next)
}
The helpers:
hbs.registerHelper('selectedSport', (option, sportValue) => {
return option === sportValue ? ' selected' : '';
})
hbs.registerHelper('selectedDifficulty', (option, difficultyValue) => {
return option === difficultyValue ? ' selected' : '';
})
Many thanks for your help! :)
Finally I solved it this way:
Instead of typing all the options directly on the HBS, I create these with a helper that renders each option.
<div class="form-floating col-3">
<select name="sport" class="form-select" id="floatingSelect">
{{#each sportOptions as |sportOption|}}
{{option ../sport sportOption}}
{{/each}}
</select>
<label for="floatingSelect">Sport</label>
</div>
<div class="form-floating col-2">
<select name="difficulty" class="form-select" id="floatingSelect">
{{#each difficultyOptions as |difficultyOption|}}
{{option ../difficulty difficultyOption}}
{{/each}}
</select>
<label for="floatingSelect">Difficulty</label>
</div>
The helper receives 2 parameters: sport and sportOption and according to their value, returns a string cointaining the option with the selected attribute or not.
hbs.registerHelper('option', function (selectedValue, value) {
const selectedProperty = value == selectedValue ? 'selected' : '';
return new hbs.SafeString(`<option value=${value} ${selectedProperty}>${value}</option>`);
});
sportOption and difficultyOption are arrays with all the possibilities inside them.
I hope that, if someone else has the same problem, this can be of any help :)

Getting undefined at node when i am selecting it by req.body.status

here is my code for select in html
<select class="status" name="status">
<option value="Pending">Pending</option>
<option value="Done">Done</option>
</select>
here is my code for server.js
App.post('/userAddedIntoTable',(req,res)=>{
console.log(req.body.status);
res.send("testing");
});

Cannot POST error using Express, Mongoose, EJS

(For the solution check the last answer)
I'm creating object with rating system with default value of 0. What I'm trying to do is to update the rating value by choosing one of the options in the <select> dropdown menu. The problem is when I'm submiting the selected value it sends the 'Cannot POST / ...' error.
Here's the app.js code with post and get requests:
// Updating Single Object
app.post('project/:projectId', (req, res) => {
const project = {};
project.rating = req.body.rating;
Project.update({_id: request.params.projectId}, project, (err) =>{
if(err){
console.log(err);
return;
} else {
res.redirect('/project/:projectId');
}
});
});
// Route To Single Project
app.get('/project/:projectId', (req, res) => {
const requestedProjectId = req.params.projectId;
Project.findOne({_id: requestedProjectId}).populate('image_file').exec((err, project) => {
res.render('project', {
project: project
});
});
});
And the form:
<form action="/project/<%= project.id %>" method="post">
<select class="" name="rating">
<option value="0">Rate us</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="submit" value="Vote">
</form>
I think I'm missing something but can't figure it out.
Thank you in advance.
Just change your url in routes, use /project/:projectId instead of project/:projectId in app.post() method
Solved it after 3 hours, realizing I was missing the / before project in the url route.
app.post('project/:projectId', (req, res) => {
Maybe instead of:
<form action="/project/<%= project.id %>" method="post">
you should use:
<form action="/project/<%= project._id %>" method="post">

hide on element and show other element in jquery

$(document).ready(function(){
$(".btn").hide();
$(".about input").on('click',function(){
$(".about input").hide();
$(".btn").show();
});
});
" method="post" enctype="multipart/form-data">
save as
cover
logo
save
<select name="save">
<option selected="selected">save as<option>
<option value="coverimage">cover<option>
<option value="logo">logo<option>
</select>
<input type="file" name="image"></input>
<button class="btn">save</button>
</form>
initially hiding ".btn", but after clicking ".about input" want to hide ".about input" and show ".btn"

Resources