A voting system with jQuery, PHP and Smarty

问题

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.

回答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
                   }
                }
           });
    }
)

回答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.

来源：https://stackoverflow.com/questions/16482081/a-voting-system-with-jquery-php-and-smarty

标签

php

jquery

html

smarty

vote