Frage

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?

War es hilfreich?

Lösung

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>

Andere Tipps

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!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top