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>