4

I'm want to implement thumbs up and down rating system in my web app using jquery. Please tell me some plug-in or code how to implement the thumbs up and down rating system in my website, please share links or resources.

Thanks

djmzfKnm
  • 26,679
  • 70
  • 166
  • 227

3 Answers3

13

jQuery

This is nothing more than a roll-over effect, and an address that waits to update a database entry. It's not really jQuery. The "meat" of this would be your database and server-side scripting.

$("a.voteup").click(function(){
  $.get("updatescore.php", {"id":"112","score":"1"}, function(response){
    /* Do something with the response */
  });
});

That code may be a bit off, but it's close enough to convey the point. From there, you would have a server-side script waiting to receive this:

PHP / MySQL

IMPORTANT: Do not use as-is. Only for demonstration.
ASP.NET: I noticed from your past questions you are likely working within the .NET technologies. The process done here will still be faily similar. You'll handle the incoming request, require the user to be logged in, their score to be 1 or -1, and whatever else you wish. 

  session_start();
  $userid = $_SESSION["userid"];

  $vote = $_GET["score"]; /* Limit to 1 or -1 */
  $article = $_GET["id"];

  /* Whatever is printed here will be the 'response' variable
     over in our jQuery callback function. Ideally, this function
     would only allow the vote if the following are true:
       1. User has not yet voted on this article
       2. Score is 1 or -1
       3. Voting is enabled on this article
       4. User is indeed logged in */
  print castVote($article, $vote, $userid);

?>
Sampson
  • 265,109
  • 74
  • 539
  • 565
  • 1
    Indeed, this is a distinctly AJAX feature, most of the code being on the server side. – Noldorin Jun 26 '09 at 15:52
  • The code your posted is very easy to hack... you put the score in the Javascript lol? Someone could just put 10000 in the javascript and have a boost of vote :P – Patrick Desjardins Jun 26 '09 at 15:55
  • 3
    Daok, my code isn't for production. Of course it's not secure. It's meant to convey an idea, not a full solution. – Sampson Jun 26 '09 at 15:56
  • On the server side you would limit scores to "1" or "-1", and your attempt to send 1,000 across will fail. – Sampson Jun 26 '09 at 15:57
  • much as this looks like it will work, you're using a GET request to change data on the server. The arguments are varied, but strictly I think you should use $.post here – Dave Archer Jun 26 '09 at 15:57
  • 3
    As with all things, server-side validation would be a must. Note that he *did* say "do not use as-is". – Cal Jacobson Jun 26 '09 at 15:57
  • @David, I went with GET for a fall-back incase scripting isn't available. It work work either way. – Sampson Jun 26 '09 at 15:58
  • fair play, sir :-) I wasn't really trying to 'down' you. Just pointing out so the asker can be aware for future reference. – Dave Archer Jun 26 '09 at 16:05
  • @David - No worries. I didn't feel like you were "downing" me :) – Sampson Jun 26 '09 at 16:06
  • ah the irony in context of 'downing' :-D – Dave Archer Jun 26 '09 at 16:09
  • If I am blocking the user to vote only once on the basis of IP address (for gust users) and userid (for registered users), which means one person can vote one time up or down, user also has the option that he can later change there vote, means if i have voted up then after sometime i can vote it down also, so my up vote will be removed and down vote will be counted. Is there any security measures in this scenario ? – djmzfKnm Jun 26 '09 at 16:55
  • 1
    Prashant, As long as you check to see if the user has already voted, you should be safe. If they voted, and their previous vote is different than the one they're now sending, then update their record. If they haven't voted, insert a new record. If they've voted, and it's the same value, bake them a cake :) Just be sure to always check for previous activity. – Sampson Jun 26 '09 at 17:10
7

here is a style with thumbs up and down using JQuery with a Backend in PHP/MySQL.

Link to code (You can try the demo online and all the source code is there)

Patrick Desjardins
  • 136,852
  • 88
  • 292
  • 341
0

Just Read the documentation of Jquery:

Rate me: Using Ajax

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

farnoush resa
  • 403
  • 5
  • 7