this is my like button...
HTML code
<div class="btn">
<div class="boxcoracao">
<span class="coracao" id = "<?php echo $postid?>" name = "like">br>   Love</span>
</div>
</div>   
Jquery inside HTML
<script>
$(".btn ").click(function(){
$('.boxcoracao .coracao', this).toggleClass("ativo");
});
</script>
it works when i click and unclick the button the button changes but what my problem is how can i use this function to save data to my database. sample when 1st click the button it will like.. and when i click the button again it will unlike. can you help me how to query this ?
like table
postid | postmember | likeid
50 12 1
postid by the name itself the id of the post.. postmember is the id of the user who posted sample user 12 posted and the id is 50.. likeid is the user who likes the post of the other user sample user 1 like the post of user 12..
Using ajax would be an option.
$("#postWrapper").on("click", ".likeToggle", function(){
// grabe the variables you need
var postid = $("#postid").attr("data-postid"); //postid
var postmember = $("#postmember").attr("data-postmember"); // postmember
var likeid = $("#likeid").attr("data-likeid"); // likeid
$(this).toggleClass("likeColor");
if ($(this).hasClass("likeColor")){
console.log("LIKE");
$(this).text("dislike"); // update the text to show what the next click would be
togglePost("like", postid, postmember,likeid); // run function
} else {
console.log("DISLIKE");
$(this).text("like"); // update the text to show what the next click would be
togglePost("dislike", postid, postmember,likeid); // run function
}
// send ajax to process.php
function togglePost(action, postid, postmember, likeid){
$.ajax({
type: "post",
url: "process.php",
data: "action="+action+"&postid="+postid+"&postmember="+postmember+"&likeid="+likeid,
success: function(data){
alert("success");
},
error: function(e){
alert("error");
}
});
}
});.likeColor {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- index.php -->
<div id="postWrapper">
<span id='postid' data-postid="50">POST ID: 50</span>
<span id='postmember' data-postmember="12">CREATED BY: 12</span><br><br>
<p>post contents are written here....</p><br>
<br><hr><br>
<div id='likeid' data-likeid="10">currently LOGGED IN as Member: 10</div><br>
<button class="likeToggle">like</button>
</div>
<!-- process.php -->
<!--
/*
// you need to add 1 more row here and call it id and make it autoincrement INT or inserts wont work.
id = 1 | postid = 50 | postmember = 12 | likeid = 1
id = 2 | postid = 50 | postmember = 12 | likeid = 22
id = 3 | postid = 50 | postmember = 12 | likeid = 1001
id = 4 | postid = 50 | postmember = 12 | likeid = 21
id = 5 |postid = 50 | postmember = 12 | likeid = 44
*/
$action = $_POST['action'];
$likeid = $_POST['likeid'];
$postmember= $_POST['postmember'];
$postid = $_POST['postid']
UpdateLikes($postid, $postmember, $likeid, $action);
function UpdateLikes($postid, $postmember, $likeid, $action){
if ($action == "dislike"){
$query = mysql_query("DELETE FROM liketable WHERE
postid = '$postid' &&
likeid = '$likeid'
");
} else {
// before inserting you might want to check if they alredy liked or not before adding their count again.
$query = mysql_query("INSERT INTO liketable
( postid, postmember, likeid ) VALUES
('$postid','$postmember','$likeid')");
}
}
-->Try this:
$(".btn ").click(function(){
$('.boxcoracao .coracao', this).toggleClass("ativo");
// make an ajax call here to send the data to the server and save it in database
});
If condition be like:
var selection = '';
if( $(this).val() == 'like' )
{
selection = 'liked';
}
else
{
selection = 'like';
}
pass this variable selection in ajax() call.
and on page reload check the status from database to show like / unlike icon respectively.
You'll need to include an if statement inside the click function.
$(".btn ").click(function(){
$('.boxcoracao .coracao', this).toggleClass("ativo");
if( $(this).hasClass("ativo") ) {
// the query to exicute if the class has been added
}
else {
// the query to exicute if the class has been removed
}
});