Question

I have two “buttons” (liked/disliked) which are actually images attached to an href tag that when the user clicks, values are sent to my database. #Messages displays the output of check.php which simply returns the values. The jQuery code sits inside a loop along with the html for the buttons.

The weird thing is that my code works for only the Like button and only if the dislike button is removed from my code. The dislike button by itself (like button removed from code) doesn’t work at all and if both buttons are coded, neither button works.

Also, the #like is supposed to display before the #dislike, but on my page #dislike appears to the left of #like, which is not what is supposed to happen (it should appear to the right of #like). Any ideas for that?

Begin loop:

<?php
$data = mysql_query("SELECT * FROM Contests");

while($row = mysql_fetch_array( $data )){
$query = mysql_query("SELECT * FROM userContests WHERE userID='$userID' AND contestID='$row[contestID]';") or die(mysql_error()); 
$checked = mysql_fetch_assoc($query);
?>

My jQuery (if I remove #dislike, then #like works. If I remove #like, #dislike doesn’t work. When both are present, neither works):

<script type="text/javascript">
$(document).ready(function() {
    var checked = <?php echo $checked['value']; ?>;
    var postID = <?php echo $row['postID']; ?>;
    var userID = <?php echo $current_user->ID; ?>;

    if (checked == 1) {
        $('#post_<?php echo $row['postID']; ?>').addClass('like'); 
    } else if (checked == 0) {
        $('#post_<?php echo $row['postID']; ?>').addClass('dislike'); 
    }

    $('#like_<?php echo $row['postID']; ?>').click(function(liked) {

        $.ajax({
            url: 'check.php',
            type: 'POST',
            data: 'userID=' + userID + '&postID=' + postID + '&value=' + '1',
            success: function(result) {
                $('#Message_<?php echo $row['postID']; ?>').html('').html(result).prependTo('#post_<?php echo $row['postID']; ?>');
            }
        });

        $('#post_<?php echo $row['postID']; ?>').removeClass('dislike').addClass('like');
        if (showLikes.attr('checked')) {
            $('#post_<?php echo $row['postID']; ?>').toggle();
        }
    });

    $('#dislike_<?php echo $row['postID']; ?>').click(function(disliked) {

        $.ajax({
            url: 'check.php',
            type: 'POST',
            data: 'userID=' + userID + '&postID=' + postID + '&value=' + '0',
            success: function(result) {
                $('#Message_<?php echo $row['postID']; ?>').html('').html(result).prependTo('#post_<?php echo $row['postID']; ?>');
            }

        $('#post_<?php echo $row['postID']; ?>').removeClass('like').addClass('dislike'); 
        if (showDislikes.attr('checked')) {
            $('#post_<?php echo $row['postID']; ?>').toggle();
        }
    });

My HTML:

<div id="post_<?php echo $row['postID']; ?>" class="post">
<div id="post_<?php echo $row['postID']; ?>_inside">
    <div>
        <a id="like_<?php echo $row['postID']; ?>" class="like" href="#"><span></span></a>
    </div>
    <div>
        <a id="dislike_<?php echo $row['postID']; ?>" class="dislike" href="#"><span></span></a>
    </div>
    <b><?php echo $row['Title']; ?></b><br>
    Expires: <?php echo $row['Exp']; ?><br>
    <ul id="listM"></ul> 
</div>
</div>
<div id="Message_<?php echo $row['postID']; ?>" class="reminder"></div>

End loop:

<?php 
} 
?>

My CSS:

a.like {
float: right;
background: url(images/entered.png) no-repeat top center;
height: 30px;
width: 28px;
}

a.like:active {
float: right;
background: url(images/entered.png) no-repeat bottom center;
height: 30px;
width: 28px;
}

a.dislike {
float: right;
background: url(images/not-interested.png) no-repeat top center;
height: 30px;
width: 28px;
}

a.dislike:active {
float: right;
background: url(images/not-interested.png) no-repeat bottom center;
height: 30px;
width: 28px;
}

So what could possibly be going on? If #like works without #dislike, then why won’t #dislike work without #like?

Answer 1

I manage to solve the problem by inserting the value named value sent through ajax inside a variable.

I don’t know why it doesn’t work when hard-coded but there you go.