A voting system with jQuery, PHP and Smarty

Question

I have made a voting feature to my website using only PHP and Smarty. This's the HTML part of it:

<p>{$vote} <a href="vote.php?q_vote=vote_up&question_id={$qid}"><i class="icon-thumbs-up"></i></a> <a href="vote.php?q_vote=vote_down&question_id={$qid}"><i class="icon-thumbs-down"></i></a></p>

The PHP part of the code takes the vote and refreshes the same page.

I want to do the same thing using jQuery so that it won't need to refresh the page. Here is what I wrote in the HTML :

$("#q_upvote").click(function()
    {
        var vote = "vote_up";
        var votedata = "";
        votedata = "vote= " + vote;
        $.ajax({                 
                type: 'POST',
                url: 'vote.php',
                data: votedata,
                success: function(vote_msg){
                if(msg == 'ok')
                    {
                    //show the new vote 
                    }
                                        else
                                        //show notification
                }
    }
)
</script>

I couldn't figure how to show the new vote there. Can you help me with that? Also I appreciate if I'm told that if I'm going on the right way.

Answer 1

• Corrected your html code so that you have a placeholder for the number of votes.

• Corrected the Ajax call so that it passes the same parameters as per the hrefs in your initial upvote anchor.

• Fixed various syntax errors in the ajax call

Html Code

    <p>
       <span class="votenumbers">{$vote}</span> 
       <a id="upvote_{$qid}" class="q_upvote" href="#"><i class="icon-thumbs-up"></i></a> 
       <a href="vote.php?q_vote=vote_down&question_id={$qid}"><i class="icon-thumbs-down</i</a>
   </p>

jQuery Code

$(".q_upvote").click(function()
    {
        var vote = "vote_up",
            question_id = this.id.split('_')[1], 
            votedata = "q_vote="+vote+"&question_id="+question_id;
        $.ajax({                 
                type: 'POST',
                url: 'vote.php',
                data: votedata,
                success: function(vote_msg){
                   if(vote_msg== 'ok')
                       {
                       //show the new vote
                       $(this).find('.votenumbers').closest().html(parseInt($(this).find('.votenumbers').closest().html())+1) 
                       }
                   else{
                        //show notification
                   }
                }
           });
    }
)

Answer 2

At the point you know that the vote has been saved correctly, you can just increment your vote on the client side, for example:

<script type="text/javascript">
var votes = 0;
$("#myVoteNumberDiv").html(votes);
</script>

At the point //show the new vote you'd write:

votes++; //or in case he voted down: votes--;
$("#myVoteNumberDiv").html(votes);

Tell me if you meant something different, I'm not completely sure I understood your question correctly.