Question

My code pulls posts from mysql. Each post has a pair of radio buttons (like/dislike) that on click, assigns the appropriate class to the div it is attached to and stores the value in mysql (so when the page loads, checked values are recalled). The page has master control checkboxes that when clicked, show/hide all divs that match the appropriate class.

For example: If the user decides to hide all disliked posts, the posts remaining are the liked posts and those that haven’t been decided on. This is fine. The problem however, is in the situation where the user decides to change a liked post into a disliked post (or makes a decision to dislike an undecided post). In that situation, the newly disliked post doesn’t disappear as it should (the switch to hide disliked posts is ON).

The changed values are indeed sent to the database so it isn’t my ajax that is the problem.

I have css to change the background color of my divs based on class and when the user changes his selection, the background changes so I know that the div class is also being changed and as such, that isn’t the problem either.

This leaves the problem lying in the way the checkboxes look for the div classes.

Here’s my code:

<form name="myform" action="" method="post">
    <fieldset>
        <legend>Master Controls</legend>
    <div class="left">
            <p><input id="show_likes" name="show_likes" type="checkbox" value="1" />        
    <label for="b1">Hide Likes:</label></p>
</div>
<div class="right">
    <p><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" />
    <label for="b1">Hide Disikes:</label></p>
</div>
    </fieldset>
<br><br>

   <fieldset>
        <legend>Posts</legend>

<?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);
?>

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

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

    $("input[name*='pref_<?php echo $row['contestID']; ?>']").click(function() {
        var contestID = <?php echo $row['contestID']; ?>;
        var value = $(this).val();
        var userID = <?php echo $current_user->ID; ?>;

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

        if (value == 1) {
            $('#contest_<?php echo $row['contestID']; ?>').removeClass('dislike').addClass('like'); 
        } else if (value == 0) {
            $('#contest_<?php echo $row['contestID']; ?>').removeClass('like').addClass('dislike'); 
        }
    });

    $("input[name*='show_likes']").click(function() {
        if ($('#contest_<?php echo $row['contestID']; ?>').is('.like')) {
            $('#contest_<?php echo $row['contestID']; ?>').toggle();
        }
    });

    $("input[name*='show_dislikes']").click(function() {
        if ($('#contest_<?php echo $row['contestID']; ?>').is('.dislike')) {
            $('#contest_<?php echo $row['contestID']; ?>').toggle();
        }
    });
});
</script>


<div id="contest_<?php echo $row['contestID']; ?>" class="post">
<div id="contest_<?php echo $row['contestID']; ?>_inside">
    <b><?php echo $row['Title']; ?></b><br>
    Expires: <?php echo $row['Exp']; ?><br>
    <ul id="listM"></ul>

    <form id="form_<?php echo $row['contestID']; ?>" action="/">  
        <fieldset> 
            <div class="left"><p><input id="like_<?php echo $row['contestID']; ?>" type="radio" name="pref_<?php echo $row['contestID']; ?>" value="1"<?php if ($checked['value'] == "1") echo " checked"; ?> />
            <label for="like_<?php echo $row['contestID']; ?>">Like</label></p></div>
            <div class="right"><p><input id="dislike_<?php echo $row['contestID']; ?>" type="radio" name="pref_<?php echo $row['contestID']; ?>" value="0"<? if ($checked['value'] == "0") echo " checked"; ?> />
            <label for="dislike_<?php echo $row['contestID']; ?>">Dislike</label></p></div>
                <hr />
        </fieldset>  
    </form>  
</div>
</div>
<div id="Message_<?php echo $row['contestID']; ?>"></div>

<?php 
} 
?>

</div>

Any ideas?

Answer 1

You need to retrigger the hide show logic on form value changes. i took a stab at it. when a preference radio value is changed, it alters the closest ".post"’s class to be liked or disliked respectively and then checks to see if the ".post" should be visible.

code

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

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

    $("input[name*='pref_<?php echo $row['contestID']; ?>']").click(function() {
        var contestID = <?php echo $row['contestID']; ?>;
        var value = $(this).val();
        var userID = <?php echo $current_user->ID; ?>;

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

        if (value == 1) {
            $('#contest_<?php echo $row['contestID']; ?>').removeClass('dislike').addClass('like'); 
        } else if (value == 0) {
            $('#contest_<?php echo $row['contestID']; ?>').removeClass('like').addClass('dislike'); 
        }
    });

    $("input[name*='show_likes']").click(function() {
        if ($('#contest_<?php echo $row['contestID']; ?>').is('.like')) {
            $('#contest_<?php echo $row['contestID']; ?>').toggle();
        }
    });

    $("input[name*='show_dislikes']").click(function() {
        if ($('#contest_<?php echo $row['contestID']; ?>').is('.dislike')) {
            $('#contest_<?php echo $row['contestID']; ?>').toggle();
        }
    });
$("input:radio[name^='pref_']").bind("shouldHide", function(event){
  var dislikesHidden = $("#show_dislikes").prop("checked");
  var likesHidden = $("#show_likes").prop("checked");
  var closestPost = $(this).closest(".post");
  if((dislikesHidden  && closestPost .is(".dislike")) ||
likesHidden && closestPost.is(".like")
){
      closestPost.hide();
  }
}).change(function(event){
//if it has a class in the list, it removes it. If it does not have a class in the list, it adds it.
  $(this).closest(".post").toggleClass("like dislike");
  $(this).trigger("shouldHide");
});
});
</script>