Question

I have am trying to create a simple voting page. There are a few links on each side and when the user click the up arrow the vote is counted and the vote count value is increased. Everything works right now except that when the vote is increased the new value appears on top of the upvote arrow (which makes sense since I am echoing the new value). I have not been able to figure out how to set the updated vote count into the SPAN which should show the vote count.

Here is the code:
HTML

<?php
$sql=mysql_query("SELECT * FROM discussion_links WHERE link_side = 'Michigan'");
while($row = mysql_fetch_array($sql)) {
    $link_id=$row['link_id'];
    $url=$row['link_url'];
    $title=$row['link_title'];
    $source=$row['link_source'];
    $votes=$row['vote_count'];
?> 
<div class="top-links-wrapper">
    <div class="link-info">
        <a class="link-title" href="http://<?php echo $url ?>"><?php echo $title . "</a>"; ?>
        <p class="link-source"><?php echo $source . "</p>" ?>
    </div>
    <div class="link-vote-wrapper">
        <div class="link-votes">
            <span><?php echo $votes; ?></span>
        </div>
        <a href="#" class="vote" id="<?php echo $link_id; ?>" name="up" title="Up vote"></a>
    </div>
</div>
<?php   
    }
?>

I would like to replace the value returned from the PHP function below into the SPAN in the code above.

PHP

<?php
$ip=$_SERVER['REMOTE_ADDR']; 

if($_POST['id']) {
    $id=$_POST['id'];
    $id = mysql_escape_String($id);
    //Verify IP address in Voting_IP table
    $ip_sql=mysql_query("select ip_add from Voting_IP where link_id_fk='$id' and ip_add='$ip'");
    $count=mysql_num_rows($ip_sql);

    if($count==0) {
        // Update Vote.
        $sql = "update discussion_links set vote_count=vote_count+1 where link_id='$id'";
        mysql_query( $sql);
        // Insert IP address and Message Id in Voting_IP table.
        $sql_in = "insert into Voting_IP (link_id_fk,ip_add) values ('$id','$ip')";
        mysql_query( $sql_in);
    }
    else {
        echo "<script>alert('You have already voted');</script>";
    }
    $result=mysql_query("select vote_count from discussion_links where link_id='$id'");
    $row=mysql_fetch_array($result);
    $up_value=$row['vote_count'];
    echo $up_value;
}
?>

This $up_value is the one I would like to replace the current vote count in the HTML.

jQuery

<script type="text/javascript">
    //<![CDATA[
    var $j = jQuery.noConflict();
    $j(function() {
        $j(".vote").click(function() {
            var id = $j(this).attr("id");
            var name = $j(this).attr("name");
            var dataString = 'id='+ id ;
            var parent = $j(this);

            if (name=='up') {
                $j(this).fadeIn(200).html('<img src="dot.gif" />');
                $j.ajax({
                    type: "POST",
                    url: "up_vote.php",
                    data: dataString,
                    cache: false,

                    success: function(html) {
                        parent.html(html);
                    } 
                });
            }
            return false;
        });
    });
    //]]>
</script>

Thanks and any help would be greatly appreciated.

Answer 1

Assuming that you are returning the appropriate (int) total back in the success function,
then you should just set the InnerHTML of the span element to that value

It would be convenient if you were to give each link-votes element a unique ID and use that id to change the InnerHTML of the span element. on ajax success

Since you are already associating the vote_id with the event handler, then you
could simply add a prefix to the span id element, and then in the success function,
call something like this:

       $("#myPrefix"+id).html(html);