I am very new to programming, it might sound stupid but can anyone of you please help me out. I am designing a cart page using node.js which adds each item at once. There are two buttons update and delete, everything is working fine except these buttons. Can anyone help me out to make these buttons working.
Thank you
Here is my code.
cart.js
var express = require('express');
var router = express.Router();
router.all('/', function (req, res, next) {
var cartTgt = [];
if (req.session.cart !== undefined) {
cartTgt = req.session.cart;
}
res.render('cart', {title: 'Your Cart', cart: cartTgt,message: 'Successfully Added'});
});
module.exports = router;
order.js
var express = require('express');
var router = express.Router();
router.all('/', function (req, res, next) {
var message = '';
if (req.method === 'POST') {
if (req.session.cart === undefined) {
req.session.cart = [];
}
var item = {};
item.itemname = req.body.itemname;
item.quantity = req.body.quantity;
req.session.cart.push(item);
console.log(req.session.cart);
}
res.render('order', {title: 'Order Form', message: 'The item has been added to the cart!'});
});
module.exports = router;
cart.jade
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
header
h1= title
hr
section
form(method='post' action='/cart')
table
thead
tr
th Item Name
th Quantity
th Update
th Delete
tbody
each item in cart
tr
td #{item.itemname}
td #{item.quantity}
td: input(type='submit',value='Update')
td: form(method='post' action='/cart')
input(type='submit',value='Delete')
br
p= message
order.jade
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
h1= title
hr
form(method='POST', action='/order')
label Item Name:
br
input(type='text', name='itemname')
br
label Quantity:
br
input(type='text', name='quantity')
br
input(type='submit')
br
a(href='/') Home Page
br
a(href='/cart') Cart Page
hr
p= message
Solution:
You are using nested form to update and delete, besides you are not sending which item quantity is to be updated or deleted. Thus, better option is to eliminate the nested forms and use simple anchor tags, in which you can send a GET request with itemname in the query string and on cart.js retrieve the itemname and update the req.session.cart as you need.
Cart.jade
td: a(href='http://yourwesite/cart/update?item='+item.itemname) Update
td: a(href='http://yourwesite/cart/delete?item='+item.itemname) Delete
Cart.Js
app.get('/update',function(req,res,next){
// get the itemname from querystring using req.query.itemname
// and perform operations in the req.session.cart array
var temp = req.session.cart.map(function(value,index,array){
if(value.itemname === req.query.itemname){
value.quantity +=1;
}
return value;
});
req.session.cart = temp;
res.render('cart', {title: 'Your Cart', cart: req.session.cart, message: 'Successfully Added'});
});
app.get('/delete',function(req,res,next){
// get the itemname from querystring using req.query.itemname
// and perform operations in the req.session.cart array
var temp = req.session.cart.filter(function(value,index,array){
if(value.itemname === req.query.itemname){
// remove the item from the cart array
return false;
}
return true;
});
req.session.cart = temp;
res.render('cart', {title: 'Your Cart', cart: req.session.cart, message: 'Successfully Added'});
});
Notes:
If you have to use POST request then you have to have two separate forms. But you can achieve it using GET request also thus a tags are favorable for that.
In both cases:
The form should be there for each item, not for the whole table. Considering there are no more problems, only one item would be changed regardless of which "Update" button was pressed.
You're also not sending the item name to the server when submitting the form. When using HTML forms, everything you want to send in the request must be inside an <input> tag (or you use XMLHttpRequest and specify what you want manually). I suggest adding an hidden field to store it like this:
input(type='hidden' name='itemname' value='#{item.itemname}')
Also, you cannot nest HTML forms, so the two used in the table must be separated. And finally, are you sure everything worked as expected? The quantity cannot be edited without using an input tag for it in the cart page.
I suggest you change your code (inside cart.jade) as such:
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
header
h1= title
hr
section
//form(method='post' action='/cart') -> Moved below
table
thead
tr
th Item Name
th Quantity
// No th Update, explained why below
th Delete
tbody
each item in cart
tr
td #{item.itemname}
// The whole form needs to be inside a single <td> tag, so the quantity and update columns are merged together
td
form(method='post' action='/cart')
// Send the item's name
input(type='hidden' name='itemname' value='#{item.itemname}')
// Expose the quantity as a editable text box (in an input so it gets sent)
input(type='number' name='quantity' value='#{item.quantity}')
input(type='submit' value='Update')
// The delete button form, completely contained in the <td> tag
td
form(method='post' action='/cart')
// Send the item's name
input(type='hidden' name='itemname' value='#{item.itemname}')
input(type='submit' value='Delete')
br
p= message
To avoid the duplicate hidden inputs you could try sending requests without forms: with XMLHttpRequest. I advise against using it directly so try a library like qwest or jQuery.
Related
I am trying to insert, delete, and update data on a data base with html buttons. To do this i am using a pug page that is called by node express, and it all works fine. Until i try to insert data into my database. so i have this in my pug file
script(src='editor.js')
...
p Item Type *required*<br/>
input(type="text", id="iType", name="iType")
p Item name *required*<br/>
input(type="text", id="name", name="Name")
p Item price *optional*<br/>
input(type="text", id="price", name="Price")
p Item ABV *optional*<br/>
input(type="text", id="desc", name="ABV")
p Item description *optional*<br/>
input(type="text", id="desc", name="Desc")
button(id="addItemBtn" onclick="updateMenuItem("+document.getElementById('iType').value+","+document.getElementById('name').value+","+document.getElementById('Price').value+","+document.getElementById('ABV').value+","+document.getElementById('Desc').value+")") add
and with it i am trying to pass the contents of the input element to my javaScript function in editor.js
function updateMenuItem (itype,name,price,abv,desc) {
//set up connection variables for the sql query
var conn = new sql.ConnectionPool(sqlconfig);
var sqlreq = new sql.Request(conn);
//initiate the connection
conn.connect(function (err) {
//throw an error if the page cannot connect to the server
if (err) {
console.log(err);
return;
}
//
sqlreq.query("insert into food '"+itype+"','"+name+"','"+price+"','"+abv+"','"+desc+"'"), function () {
console.log('OK')
};
})
};
what am i doing wrong here?
The syntax should be:
button(id="addItemBtn" onclick="updateMenuItem(document.getElementById('iType').value, document.getElementById('name').value, document.getElementById('Price').value, document.getElementById('ABV').value, document.getElementById('Desc').value)") add
I am setting some objects on Firebase-database, and showing them on a HTML table with 'child_added' to dynamically add them as soon as they are added to the database, and there has to be a delete button on each row of the table, but I do not know how to make a working button to delete the corresponding database object.
I am dynamically making a table with information coming from a Firebase. database. I want a delete button on each row of my table which deletes the corresponding table from the database.
function vislag(snapshot) {
let nylag = snapshot.val();
let idrettRef = database.ref("idrett/" + nylag.Idrett);
idrettRef.once("value", function(snapshotIdrett) {
let idrettinfo = snapshotIdrett.val();
txtTabell.innerHTML += `
<tr>
<td>${nylag.navn}</td><td>${nylag.klasse}</td>
<td>${nylag.antall}</td><td>${idrettinfo.navn}</td>
<td>
<input type="button" value="delete ${nylag.navn}" onclick="deletelag()"></td>
</tr>`;
});
}
lag.orderByChild("Idrett").on("child_added", vislag);
function deletelag() {
databaseobjekt.remove()
}
I want the onclick function: deletelag() to delete the object from the Firebase database. How do I do that?
To delete a node from the database, you need to have a DatabaseReference pointing to that specific node, and then call the remove() method on it.
For the code you shared that seems to be:
database.ref("idrett/" + nylag.Idrett).remove();
If you have a list of children, and you want the user to be able to remove any of them individually, you'll typically have to add the ID of each individual child into your HTML. That way you can read the ID of the item that the user clicks on, and delete that specific node.
A simple example of that could be something like:
database.ref('listitems').once('value', (snapshot) => {
snapshot.forEach((child) => {
let id = child.id;
let name = child.val()
let liElm = `<li id='${id}'>${name}</li>`;
listElm.appendChild(liElm);
})
})
And now when somebody clicks on the li, you can delete the correct child node with:
function onLiClick(e) {
let id = e.target.id;
database.ref('listitems').child(id).remove();
}
}
I am creating admin panel in website and I am using firebase as a database in backend.I am able to display listing but when I click on the particular listing there status should change from 'pending' to 'accept' but it doesnt.I dont know where I did mistake.Please give suggestion and I attach js file and database screenshot
pl.js
var firebaseheadingRef = firebase.database().ref().child("user");
firebaseheadingRef.on('child_added',datasnapshot=>{
var title= datasnapshot.child("listing").child("title").val();
var userid= datasnapshot.child("username").val();
var type= datasnapshot.child("listing").child("title").val();
var publisheddate= datasnapshot.child("listing").child("publish").val();
var expirydate= datasnapshot.child("listing").child("expire").val();
$("#tablebody").append("<tr><td>"+title+"</td><td>"+userid+"</td><td>"+type+"</td><td>"+publisheddate+"</td><td><button type=button id=accept onclick=accept()>Accept</button><button type=button>Reject</button></td></tr>");
});
function accept()
{
firebaseheadingRef.on('child_changed',datasnapshot=>{
datasnapshot.child("listing").child("status").update({"status":"accept"});
setCommentValues(postElement, data.key, data.val().text, data.val().author);
});
}
database
listing display picture where I click on accept button then update of status should done
There are two places where you need to change your code:
First, in the code that generates the table, you have to pass the id of the node to the function call, as follows. You get the node id with the key property of the DataSnapshot.
.....
$("#tablebody").append("<tr><td>"+title+"</td><td>"+userid+"</td><td>"+type+"</td><td>"+publisheddate+"</td><td><button type=button id=accept onclick=accept('" + datasnapshot.key + "')>Accept</button><button type=button>Reject</button></td></tr>");
...
And secondly you have to write your accept() function in such a way it updates the database value, with the set() method. Like the following
function accept(userId) {
var nodeRef = firebase.database().ref("/user/" + userId + "/listing/status");
return nodeRef.set('accept');
}
I'm making a simple CRUD model with input checkbox. I have no problems on server side, everything is fine. I use NodeJS +MongoDB. But I have problem in editing existing user. When I edit an existing user with a checked checkbox( I get JSON object with parameter checked=true ) how should I display it using JS? This is part of my users.js file in /routes/ folder
var express = require('express');
var router = express.Router();
var User = require('../../models/User');
var rest = require('restler');
router.get('/adduser', function(req, res){
var user = new User();
user.contacts.push({phone: '', email: ''});
rest.get('http://localhost:3000/api/adduser').on('complete', function(data) {
res.render('users/add', { title: 'Add New Users' , n: user});
});
});
And this is views/users/fields.jade part of file for better understanding:
.form-group
label.col-sm-2.control-label(for='email') E-mail:
.col-sm-10
input(type="email", placeholder="email", name="email", value = n.contacts[0].email,required)
.form-group
.col-sm-offset-2.col-sm-10
input#enabled(type="checkbox",style='text-align: center; vertical-align: middle;',placeholder="", name="enabled", value = n.enabled)
| Enable user
So my problem is that I don't understand how I should display that checkbox is really checked when loading existing user.
If user is checked attribute n.enabled=true and if not n.enabled=false. So if user is checked on load of that user I need the input filed to be checked.
I've tried it to do the following way, but it wrote me that n wasn't defined...and I don't know how to pass n as the parameter for that function:
$(document).ready(function(){
if(n.enabled=="true"){$("enabled").toggle(this.checked);}
});
In fields.jade, change value = n.enabled to checked = (n.enabled ? 'checked' : '')
Use # for id-selectors and use n.enabled directly to hide or show your element like,
$("#enabled").toggle(n.enabled);
//-^ prepend # before id selectors
toggle() will show/hide your element, To check uncheck use the prop() like
$(document).ready(function(){
$("#enabled").prop("checked",n.enabled);
});
I'm working with node.js express and mongodb, I have a input data from client, I need to pass the data to server look for its property and send to the client in another page.
Now I have problem with req.body.age that suppossed to get the data from client's input and use find() to get its appropriate property.
Server side code:
functions are routed in another .js file
exports.find_user = function(req, res) {
res.render('find_user.jade');
};
exports.user = function(req, res){
member = new memberModel();
member.desc.age = req.body.age; //problem
console.log(req.body.age); //undefined
memberModel.find({desc: {age: '7'}}, function(err, docs){
res.render('user.jade', { members: docs });
console.log(docs);
});
};
memberModel.find({desc: {age: '7'}} just hardcode picking up user with age 7 (works)
client side code (jade):
page for data input:
find_user.jade
form(action='/', method='post')
fieldset
lable(for="age") Find user by age:
input(type="text", size="30", name="age", required="required")
input(type='button', value='Find', onclick='location.href=\'find_user/user/\'')
page for data output with its property:
user.jade
tr
th Name
th Age
tbody
- members.forEach(function(member){
tr
td= member['name']
td= member['desc']
- });
You are not submitting your data in find_user.jade file when the user clicks the button. Instead, the client is only redirected to another page.
This is how your find_user.jade file should look like:
form(action='find_user/user/', method='post')
fieldset
label(for="age") Find user by age:
input(type="text", size="30", name="age", required="required")
input(type='submit', value='Find', name="submit")