CODEWITHSUNDEEP
phpjqueryajax
user547794
user547794

Reputation: 14521

Reddit-Style Voting Button

I am trying to implement a reddit-style voting button on my site. I have it working well, the only problem is that users can vote an unlimited amount of times currently. I need it to run a SQL query and check the database to see if they have voted before accepting the vote.

Question is: Where can I put a SQL query into this AJAX POST that disables the button if a vote exists? Here is what I have so far:

$(function(){
    $("a.vote_up").click(function(){
    //get the id



    the_id = $(this).attr('id');

    // show the spinner
    $(this).parent().append("<div id='spinnerDiv' style='width:20px; height:20px; float:right; margin-right:570px;'><img src='images/spinner.gif'/></div>");

    //fadeout the vote-count 
    $("span#votes_count, span#vote_buttons"+the_id).fadeOut("fast");


    //the main ajax request
        $.ajax({
            type: "POST",
            data: "action=vote_up&id="+$(this).attr("id"),
            url: "votes.php?personid=<?php echo $personid;?>&userid=<?php echo $userid;?>",
            success: function(msg)
            {   

                $("span#votes_count"+the_id).html(msg);
                //fadein the vote count
                $("span#votes_count"+the_id).fadeIn();
                //remove the spinner
                $("#spinnerDiv").remove();
                $("span#vote_buttons"+the_id).fadeIn();

            }
        });

    });

Upvotes: 1

Views: 1289

Answers (2)

Michael Papile
Michael Papile

Reputation: 6856

You do not want to put an SQL query in there, that is not AJAX. You should call a url handler that has code to perform the query and return json with the result. So your PHP application at votes.php should do this check and return an error if the person has already voted. Then you can set a div that will flash that user has already voted.

So for instance your app can return json: {successful : false, message: "user has already voted"}

see: http://api.jquery.com/jQuery.post/ on how to retrieve that json

EDIT

Here is the workflow I am talking about:

In index.php you have jquery like you have now, and it POSTs to votes.php the user id and what they are voting on.

In votes.php you then get those parameters. The logic in votes php would be something like:

$query = sprintf("SELECT * from votes uid='%s' AND vote_id='%s'",
mysql_real_escape_string($uid),
mysql_real_escape_string($vote_id));

if(mysql_query($query)){
   return json_encode(array("status" => 'failure', "message" => "user already voted");
}
else{
   do_vote($uid,$vote_id);
   return json_encode(array("status" => "success"));
}

Then in your ajax function you can decode this. If you get success, grey out button. If you get error already voted, dont count vote, and grey out button. If you get no response, leave button and tell the user there was an error.

Upvotes: 2

Matt Lohkamp
Matt Lohkamp

Reputation: 2192

After the vote is cast and that 'votes.php' returns 'successful' or whatever, you can fade back the button and detach the click event.

Rather than querying before submitting each new vote, ping the database as the page is building - match the ID of the object you're voting on and the user ID against the votes in the database, and if it comes back that the user has already voted on this item, highlight the vote they case (upvote arrow or downvote arrow) - and remove the click event from the arrow they've already clicked.

Upvotes: 0

Related Questions