I have a newsfeed and have created a like system for it. I have the following code for my newsfeed and like system part of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="/local_home.css" rel="stylesheet" type="text/css" />
<?php
include '/head.php';
include '/connect.php';
include '/general.php';
?>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="top_container">
<div id="header_container">
<div id="header">
<a href="website.com" class="grand_button">website</a>
</div>
</div>
<!-- END: Sticky Header -->
<div class="feed_selector">
<ul>
<li><a href="#">Community</a></li>
<li><a href="#">Local</a></li>
<li><a href="#">Global</a></li>
</ul>
</div>
</div>
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
<div class="select_box">
Feed Options
</div>
<!--- FEED CONTAINER ---!>
<div class="feed_container">
<h1>Local Feed</h1>
<div class="hr"></div>
<?php
$getnews = mysql_query("SELECT * FROM news ORDER BY post_id DESC") or die(mysql_error());
while ($row = mysql_fetch_assoc($getnews)) {
$id = $row['post_id'];
$title = $row['title'];
$body = $row['body'];
$date = $row['date'];
$likes = $row['post_likes'];
?>
<div class="deals">
<div class="title">
<?php echo $title ?>
<a class="like_button" href='#' onclick="like_add(' ,$id, ')">Like</a><br>
<?php echo '<span class="like_button" id="post_', $id ,'_likes">', $likes, '</span>'?>
</div>
<br>
<?php echo nl2br($body); ?>
<br>
<div class="date_time">
<?php echo(time_ago($date)) ?>
</div>
<div class="hr"></div>
</div>
<?php
}
?>
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
</div>
<!-- END: Sticky Footer -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/like.js"></script>
</body>
</html>
like.js is used to change the amount of likes that are displayed. It contains the two functions like_add and like_get.
function like_add(post_id){
$.post('ajax/like_add.php', {post_id:post_id}, function(data){
if(data === 'success'){
like_get(post_id);
}
else{
alert(data);
}
});
}
function like_get(post_id){
$.post('ajax/like_get.php', {post_id:post_id}, function(data){
$('#article_'+post_id+'_likes').text(data);
});
}
I have the two ajax files for like_add and like_get but I am just echoing the correct things to make both statements work as they should to test it.
This means that something is going wrong in my javacript because when I click the like button the number always stays at zero. I am getting no errors or warnings but for an odd reason I can not get the javascript to work correct. I am new to javascript but the logic seems to all be correct to me. Am I not connecting the javascript correctly in the first code?
Maybe I overlooked something but I would say your first problem is you're targeting the wrong element:
You give your like an id of post_', $id ,'_likes and then try to update article_'+post_id+'_likes
$('#article_'+post_id+'_likes').text(data);
Aside that, concatenation in php is done with . not , so I'm surprised this is working at all. A line like this looks suspicious to me:
<?php echo '<span class="like_button" id="post_', $id ,'_likes">', $likes, '</span>'?>
Why not just do this:
<span class="like_button" id="post_<?php echo $id; ?>_likes"><?php echo $likes; ?></span>
Don't discriminate against users with JavaScript disabled! To start, a simple form will do just fine:
<!-- like.php should redirect back -->
<form action="like.php" method="post" class="like-form">
<input type="hidden" name="post_id" value="<?php echo $id; ?>">
<input type="submit" value="Like">
(<span class="like-counter"><?php echo $likes; ?></span> likes)
</form>
Now you have a functional if not flashy like system. Now you may have noticed the little class="like-form" and class="like-counter" I stuck in there. That's intentional: it makes it super-easy to write the JavaScript for it:
$(function() {
$('.feed_container').on('click', '.like-form :submit', function(e) {
var likeButton = $(this);
var postID = likeButton.siblings('[name=post_id]').val();
var likeCounter = likeButton.siblings('.like-counter');
// like-ajax.php should increment the counter and return the new value
$.post('like-ajax.php', { post_id: postID }, function(numLikes) {
likeCounter.text(numLikes);
});
e.preventDefault();
});
});
Easy!