Question

So I have my blog set up to pull posts from my database in a loop. Each post (#post_) is coupled with a pair of radio buttons. When a radio button is selected, ajax sends the value to check.php where the values are put in my database. The returned html is then displayed in #Message_.

I want to make it so that ONLY when the Like radio button is selected, the div (#Message_) will appear OVER the top right corner of that post’s div.

This is the code I currently have which displays the #Message when any radio button is selected but displays it only underneath the #post.

Calling the loop:

<div id="content">

<form name="myform" action="" method="post">
        <legend>Posts</legend>

<?php
$data = mysql_query("SELECT * FROM Posts");
while($row = mysql_fetch_array( $data )){
?>

The jQuery itself, sitting inside the loop:

<script type="text/javascript">
$(document).ready(function() {

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

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

    });

});
</script>

Display the posts inside the loop:

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

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

End the loop:

<?php 
} 
?>

</div>

Answer 1

not tested but you can figure out what I’ve done here:

<script type="text/javascript">
$(document).ready(function() {

    $("input[name*='pref_<?php echo $row['postID']; ?>']").click(function() {
        var postID = <?php echo $row['postID']; ?>;
        var value = $(this).val();
        var likeDislike = $(this).id().toString().replace(/(.*)_(.*)/,'$1'); //get 'like or dislike'
        var userID = <?php echo $current_user->ID; ?>;

        $.ajax({
            url: 'check.php',
            type: 'POST',
            data: 'userID=' + userID + '&postID=' + postID + '&value=' + value,
            success: function(result) {
                if (likeDislike == 'like') { 
                    //do like stuff
                    //move the message element into the post at the top, use CSS like float:right or text-align:right etc. to position it to the right
                    $('#Message_<?php echo $row['postID']; ?>').prependTo('#'+postID);
                }
                else if (likeDislike == 'dislike') { 
                    //do dislike stuff
                    $('#Message_<?php echo $row['postID']; ?>').html('').html(result);
                }
            }
        });

    });

});
</script>