Let's say I have a website like Facebook, Twitter, or any social network. I have posts in a feed. I retrieve a list of data about each post from the backend. This data contains the id, post description, number of likes, etc. The unique id is a way to identify each post.
I have a REST framework set up where if the user likes the post; it updates the likes count of that post and registers the user as he/he liked that post. For this to happen, I need to make an AJAX request on localhost/like/{post_id}
How can I get the id of the post? Should I put this id in a data-attribute in the like button and that way I can retrieve the id like this? If this is the case, should I put the id in all the actionable features (like button, dislike button, share button, etc.)?
Here's what my post's button container looks like:
<div class="grid post__btn-container">
<div class="item">
<i class="like"></i>
</div>
<div class="item">
<i class="dislike"></i>
</div>
<div class="item">
<i class="share"></i>
</div>
<div class="item">
<i class="comment"></i>
</div>
</div>
What is the best way to place the post id and get it and pass it as a POST request in Ajax?
Have a look at this:
https://jsfiddle.net/x5m7j0Lk/
Given a setup like this
<div class="grid post__btn-container" data-postid="123">
<div class="item">
<i class="like">Like</i>
</div>
<div class="item">
<i class="dislike">Dislike</i>
</div>
<div class="item">
<i class="share">Share</i>
</div>
<div class="item">
<i class="comment">Comment</i>
</div>
</div>
<div class="grid post__btn-container" data-postid="456">
<div class="item">
<i class="like">Like</i>
</div>
<div class="item">
<i class="dislike">Dislike</i>
</div>
<div class="item">
<i class="share">Share</i>
</div>
<div class="item">
<i class="comment">Comment</i>
</div>
</div>
You can retrieve the id like this:
var posts = $('div[class="grid post__btn-container"]').children()
posts.on("click", function(){
var postId = $(this).parent().data('postid')
alert(postId)
})
Related
Is it possible to
select all the rows from a specific table in database
and
create a few divs with that specific data
without assigning them an id and then creating a .delete-btn to delete using javascript/jquery the specific div of the .post + deleting also in the database the specific row?
After selecting the data in database, then some divs post be creating like that:
<div class="newsFeed">
<div class="post"> <!-- row #1 from DB -->
<div class="author">Author name</div>
<div class="text">Text...</div>
<div class="time">time...</div>
<div class="delete-post">
<button type="button" class="delete-btn">delete this post</button>
</div>
</div>
<div class="post"> <!-- row #2 from DB -->
<div class="author">Author name</div>
<div class="text">Text...</div>
<div class="time">time...</div>
<div class="delete-post">
<button type="button" class="delete-btn">delete this post</button>
</div>
</div>
<div class="post"> <!-- row #3 from DB -->
<div class="author">Author name</div>
<div class="text">Text...</div>
<div class="time">time...</div>
<div class="delete-post">
<button type="button" class="delete-btn">delete this post</button>
</div>
</div>
<div class="post"> <!-- row #4 from DB -->
<div class="author">Author name</div>
<div class="text">Text...</div>
<div class="time">time...</div>
<div class="delete-post">
<button type="button" class="delete-btn">delete this post</button>
</div>
</div>
</div>
When clicking the .delete-btn the .post (parent div) and the row from the database must be deleted also.
Is it possible? I mean I don't want to assign them an id (of the divs) because probably users can change the id of the div via [inspect element] and try to delete another post with that specific id.
EDIT:
Want exactly I want, is, after selecting the rows from database and create the divs, how can I find the ID of each div is creating in order to make a function in javascript to delete that specific div+row in database, knowing the ID.
I am working on a post system with likes where the user can toggle the post`s like I have done everything correctly except the last step, the problem inside my v-for loop I fetch likes table from post-like relation(many to many since likes table has user_id and post_id) but it is iterating my button even when I add a condition look here-> duplicated like button, I have tried many things v-if, v-show I think the problem is with my algorithm I hope someone can fix that for me thanks.
<div class="panel panel-white post panel-shadow" v-for="post in posts" >
<div class="post-heading">
<div class="pull-left image">
<img v-bind:src="'img/profile/' + post.user.photo" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">{{post.created_at | hour}}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" v-for="(like) in post.likes" v-bind:style="like.user_id===id && like.post_id===post.id?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
<a class="btn btn-default stat-item" #click.prevent>
<i class="fa fa-reply-all"> {{post.comments.length}}</i> Comments
</a>
</div>
</div>
<comment-input :post="post" :userId="id" :userPhoto="userPhoto"></comment-input>
<ul class="comments-list" v-for="comment in post.comments?post.comments:''">
<comments :comment="comment" :userId="id" :userPhoto="userPhoto"></comments>
</ul>
</div>
<hr>
</div>
</div>
Don't loop through the button element, try to use a method likedBythisUser to check if the current user liked the post in order to bind it to the button style :
methods:{
likedBythisUser(post,id){
return post.likes.find(like=>{
return like.user_id===id && like.post_id===post.id;
}) // return a boolean value
}
}
template :
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" bind:style="likedBythisUser(post,id)?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
I have an element in the DOM that I use as a template for other forms and ends up being cloned many times. Due to all of the cloning I have several elements that have all of the same Id's. In addition to getting rid of the id attributes on each of the clones, I also want to delete the template because it shows up on the page view but doesn't have any content. My template looks like this
Template Clone
<div id="listBody">
<div id="template" class="col-md-3 panel ">
<div class="panel-body">
<div class="embed-responsive embed-responsive-4by3 text-light">
<img class="courseImage embed-responsive-item" src="http://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png" alt="cover">
<div class="embed-overlay"></div>
<div class="embed-bar embed-bar-bottom">
<div class="pull-right">
<i class="icon-calendar fa-fw"></i> Sep 12, 2015
</div>
<div>
<i class="visible icon-share fa-fw"></i> Share
<i class="icon-star visible fa-fw"></i> Favourites
</div>
</div>
</div><!-- /.embed -->
<h4 class="templateName"><strong>#*Course name stuff goes in here*#</strong></h4>
<p class="help-block"><small>by: #*Instructor stuff goes in here*# - <span class="ml-2x"><i class="fa fa-tag fa-fw"></i>#*Course TAGS stuff goes in here*#</span></small></p>
<p class="templateDescription" width="100px" text-overflow="elipses" overflow="hidden" white-space="nowrap" maxlength="200">#*Description stuff goes in here*#</p>
<i class="fa fa-long-arrow-right fa-fw"></i> READ MORE
</div><!-- /.panel-body -->
</div><!-- /.panel -->`
A solution to the problem is
var $templateClone = $('#templateParent').find('.template').clone();
$('#coursesArea').append($templateClone);
I hid the (#templateParent) by giving it a "hidden" attribute.
(#courseArea) is just a container that I created to put everything inside instead of (#listbody).
Letting everything else run like above allows for multiple objects that do not have the same Id.
First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks
I'm using mustache templates to correctly generate bootstrap accordions. Now I need to pass a prefix to the top item id = 'accorElM' and thought I could do something like this.
<div class="accordion" id='{{#DataResult[0].prefixID}}_accorElM'>
IE, get the first item in the collection
Is this possible to do?
Code sample:
<div class="accordion" id='accorElM'>
{{#DataResult}}
<div class="accordion-group">
<div class="accordion-heading">
<a style="text-align: left; text-decoration: none" class="accordion-toggle btn" data-toggle="collapse" data-parent='#{{prefixID}}accorEl' href='#{{prefixID}}collapseEl_{{id}}'>
<i class="icon-globe"></i> {{tipo}}<i class="icon-chevron-down pull-right"></i>
</a>
</div>
<div id='collapseEl_{{id}}' class="accordion-body collapse">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span9">
<address>
<br />
{{zona}}
<br />
{{cpostal}}
<br />
{{pais}}
</address>
</div>
<div class="span3">
<div class="pull-right">
.....
</div>
</div>
</div>
</div>
</div>
</div>
{{/DataResult}}
</div>
I'm guessing your data must be something like this:
{"DataResult":[
{"prefixID":"1","name":"first"},
{"prefixID":"2","name":"second"}
]
}
but in the mustache template file, I don't think you can index the object items. The approach that I would have taken would involve manipulating the Json object in javascript(or even in the backend when constructing the object) before rendering it.
In your case, if you need the prefixID of the first item in the DataResult. you could alter the object to make it look like this:
{"DataResult":[
{"prefixID":"1","name":"first"},
{"prefixID":"2","name":"second"}
],
"theIdIWant":"1"
}
and then in the template file:
<div class="accordion" id='{{theIdIWant}}_accorElM'>
{{#DataResult}}
<div class="accordion-group">
///////
</div>
{{/DataResult}}
</div>
Hope this helps.