I am trying to make a delete option for some items I have in a list. The way I am doing this is to give every item in the list a button or a link of some sort that will use POST to send the _id (from mongodb). As you can see in the code below (req.body.id), I'm trying to get the id form the request. However, the request does not have the id, because I don't know how to do this without using a form and a input field.
I've seen some ways to do it with javascript in PHP. But is there a more jade and node.js specific way?
router.post("/deleteitem", function(req,res) {
var db = req.db;
var collection = db.get("itemcollection");
id = req.body.id;
collection.remove({
"_id": id
}, function (err, removed) {
if (err) {
res.send("Error");
}
else {
res.redirect("editlist");
}
});
});
Thanks for the help.
Edit:
Client-side:
extends layout
block content
h1.
Items
ul
each item, i in editlist
li
p #{item.name} costs #{item.price}
button#btnSubmit(type="button",method="post",action="/deleteitem") Delete
a(href="/") Back to start
The button part is not very relevant though. Firstly I am not sure if it's possible to do it this way. Secondly I have not included the id in any way. I was just experimenting.
One way I could probably do it is to include the id in the url as a parameter. But that seems a bit more convoluted than just using POST and including the id in the request.
You need to expose the POST data to the req.body object using an html form, even if that takes the shape of just a button with some hidden data. You can do this using an input element alongside your button element inside of a form.
extends layout
block content
h1.
Items
ul
each item, i in editlist
li
p #{item.name} costs #{item.price}
form(action="/deleteitem",method="post")
input(type="hidden",id="id",value="#{item.id}")
button#btnSubmit(type="button") Delete
a(href="/") Back to start
This code assumes that each item has an id attribute.
With this you can get the id value via req.body.id in the next route that you submit to using the button.
Related
I am displaying a list of blog posts in a for loop, each has a comment form with send button underneath it. I need to let Django know which specific post has been clicked on so have added {{post.id}} to the button element's id. How do I then pass this information to jQuery? Is it possible to do something like this?
<button id="addComBtn{{post.id}}...>Send</button>
$('#addComBtn //post.id here').click(function() {
...
});
Or is there a better way?
Why haven't you tried out?
Yes it is possible. This should be the solution
<button id="addComBtn{{post.id}}...>Send</button>
$('#addComBtn{{ post.id }}').click(function() {
...
});
Because first Django renders the page, with its own engine(meaning, it doesn't check anything else outside of {%%}s and {{}}s), then it sends to the client, and when it renders, it will replace that.
I wanted to take an image from one HTML file and when the user clicks a button, that image moves to a standard cell of a different HTML file.
To move an element between pages, if both pages are on the same domain, you can get the HTML of the element, put it in localStorage, then delete the element. On the other page, poll the localStorage for changes, the parse the element and use it in the DOM.
I wrote a set of functions to do that. On the sending page use this code. Call the function moveElement with the element you want to move to the other page.
const page="Your Page Name";
function moveElement(element){
const prefix="_elementmover_"+page+"_";
localStorage.setItem(prefix+"htmlToMove",element.outerHTML);
localStorage.setItem(prefix+"changedHtmlToMove",localStorage.getItem(prefix+"changedHtmlToMove")*1+1);
image.remove()
}
On the receiving page, use this code. The function receivedElement will be called wth the element.
const page="Your Page Name";
function receivedElement(element){
// Do whatever you want with the element here.
}
(()=>{
const prefix="_elementmover_"+page+"_";
let getChangeNum=()=>localStorage.getItem(prefix+"changedHtmlToMove")*1;
let oldChangeNum=getChangeNum();
let checkForChanges=()=>{
let newChangeNum=getChangeNum();
if(oldChangeNum!=newChangeNum){
let element=new DOMParser().parseFromString(localStorage.getItem(prefix+"htmlToMove"),"text/html").querySelector("html>body>*");
receivedElement(element)
}
oldChangeNum=newChangeNum
setTimeout(checkForChanges,100);
}
checkForChanges();
})();
Please note that the page variable should be unique on each set of pages it is on, but both pages must have the same value for it to work properly.
I'm kind of new to Polymer and i'm having an issue lately. I create dynamically a certain amount of instances of a web-component of mine, and I'd like to be able to call a method on these instances from my parent-component but I can't figure out how to do it even with answers I found online.
Here's my parent method where I try to call the children method (the e.detail.id match the id of the specific instance of my children I'm trying to reach) :
childObj: function(e) {
var name = "selectObj"+e.detail.id;
this.$.name.hello();
},
And my child basic method :
hello: function() {
console.log("hello");
}
The ID that name gets exists well but still i get this error
TypeError: Polymer.dom(...).querySelector(...) is null
I also tried replacing this.$.name.hello() by this.$$('#selectObj'+e.detail.id) but still I get the same error.
Here's how I create my childrens elements :
newObj: function() {
var dynamicSelect = document.createElement("pbd-object-select");
dynamicSelect.num = this.nbObj;
var newId = "selectObj" + this.nbObj;
dynamicSelect.id = newId;
Polymer.dom(this.root).querySelector("#listeObjet").appendChild(dynamicSelect);
},
There are two issues with they way you are trying to query for that element. One of them is that by doing this:
this.$.name.hello();
You are basically looking for an element with the id "name", not one with the id equal to what you have in the variable name. Something like:
this.$[name].hello();
might work better in general, but it would still have some problems in your particular case. this.$ is just a "shortcut" to get elements by ID in an easy manner, but, it's just an object in which references to the elements that exist and have ids when the element is connected. Because of that it doesn't work with elements that are conditionally included (in dom-ifs for example), or that are dynamically generated, like in your case.
You can just use the getElementById method, like you would do in vanilla JS, just keeping in mind that you are querying in your element and not in document. So it would be something like:
this.shadowRoot.getElementById("selectObj"+e.detail.id).hello()
In a SPA, using a navigation framework such as Sammy.js, how could I use in page named anchors for in-page navigation?
e.g. Say I have a route like localhost/myapp/#/somerecord/1 where the application loads somerecord with id = 1.
However somerecord is really complicated and long. I want to be able to jump to a certain section using a named anchor.
Say an article element is defined like <article id=section-d> ... </article> and I just link to like <a href=#section-d>Section D</a> it technically works, but the URL reads like localhost/myapp/#section-d, this breaks the navigation stack. Hitting the Back button takes me back to localhost/myapp/#/somerecord/1 and without jumping back to the top.
The preferred action would be to either jump back to the top or to the previous page. Any ideas on how to accomplish this?
Effectively, you have to define your URL as a regular expression, and allow an optional bookmark hash at the end of it; something like:
get(/#\/somerecord\/(\d+)(#.+)?/, function() {
var args = this.params['splat'];
var recordId = args[0];
var articleId = args[1];
});
This should match any of the following routes:
#/somerecord/1
#/somerecord/1# (treated as if there is no article id)
#/somerecord/1#section-d (articleId = '#section-d')
You should then be able to use the articleId to find the matching element and manually scroll. e.g. in the last route above, using jQuery you could do something like:
var $article = $(articleId);
$(document.body).animate({ scrollTop: $article.offset().top });
});
I've just written up a more comprehensive article about this (using Durandal), if you're interested: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/
Edit
Link is dead. The article available here http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/
I've had the same problem using durandal with sammy.js. Basically, you have to create a (invisible) route for each anchor you want on your page. See a post from me about the solution I found: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html
I have an ajax function that sends a variable - num - to a php script and then echos the value of num in a div with id "status".
First what happens is the user makes a post, i run all the necessary queries and display the users posts in a div called "posts" (use a while loop so each post is in a div with the same id but the div's are under one and other). I would like the ajax functionality to work in every one of these "posts" divs (each "posts" div contains the two js buttons witch - onclick - manage the ajax function as well as a "status" div)
However every time i click one of the buttons, lets say in the bottom most visible "posts" div displayed (the button clicked calls the ajax/js function), the function carries out in the top most "posts" div where the first "status" div is whereas it should be displaying in the bottom most div where i clicked the button.
EDIT: Sorry, I was assuming you were using jQuery. My bad.
You should be using classes instead of IDs. If you use an ID jquery will only have an effect on the first one in the DOM. IDs should only be used once per page.
Use classes, then reference the divs you want to edit not only by class name, by some sort of reference to the post div you are interacting with.
$('.posts .button').click(function() {
//do ajax stuff...
$(this).parent('div').find('.status').html(data);
}
Updated code:
// .posts should be the class of the posts div
// .button should be the class of the button on which you are activating your ajax
$('.posts .button').click(function() {
$.post('your ajax post URL', function(data) {
$(this).parent('div').find('.status').html(data);
})
});