Javascript for like system

Question

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?

Its the second half that only includes the like part. I can include the whole thing if it makes it easier to understand — RightLeftRight12, May 14 '13 at 01:00
Well that "FEED CONTAINER" HTML comment is incorrect. HTML comments end with `-->`, not `--!>`. — Pointy, May 14 '13 at 12:52

score 1 · Accepted Answer · answered May 14 '13 at 01:06

1

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>

answered May 14 '13 at 01:06

Kai Qing

18,793
5
39
57

Ah I don't know how I overlooked that first problem you posted. I should have been post for both you are correct! But even after that, the code isn't working correctly. It is a set in the right direction though! So for that I thank you much! – RightLeftRight12 May 14 '13 at 01:13
The likes do not increase when pressed on the like button but they display the correct number of likes if I change the like amount in my database – RightLeftRight12 May 14 '13 at 01:15
I would add a console.log(data) to both callback functions to make sure the right info is being returned. If those numbers are correct and it is not updating html, then it may be an issue with where you place your listener or how you output the likes to the screen. But first things first, make sure the numbers are increasing in the database, and that the right numbers get returned in your callback functions – Kai Qing May 14 '13 at 01:23
1

`,` works with `echo` because it takes a variable number of arguments, and just echoes them all consecutively. So you don't need to concatenate. – Barmar May 14 '13 at 01:34
@barmar - I can accept that. I just never see anyone do it that way. Aside that though, there's really no reason to break into PHP like that the way OP is doing – Kai Qing May 14 '13 at 01:41

score 0 · Answer 2 · answered May 14 '13 at 01:54

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!

Javascript for like system

2 Answers2