May

Ajax Voting System: Create Ajax Rating/Voting system in Dzone and Digg Style. Part 2

ZeeShaN

In my previous tutorial i explain how to create simple ajax rating using Ajax, PHP and CSS3. In this part i am going to create Digg.com and Dzone.com voting style.

 
CREATE TABLE `digg_rating` (
  `id` int(11) NOT NULL auto_increment,
  `rating` varchar(200) NOT NULL,
  PRIMARY KEY  (`id`)
) 
 
 
CREATE TABLE `dzone_rated_ip` (
  `id` int(11) NOT NULL auto_increment,
  `user_ip` varchar(200) NOT NULL,
  PRIMARY KEY  (`id`)
) 
 
 
CREATE TABLE `dzone_rating` (
  `id` int(11) NOT NULL auto_increment,
  `up_rated` varchar(200) NOT NULL,
  `down_rated` varchar(200) NOT NULL,
  PRIMARY KEY  (`id`)
)

This voting system is similar to previous rating system in back end scripting i mean same ajax style but different in behavior. Check demo and download code to make it more simple and use it. Also don’t forget to give your feed back your suggestions and hot topics to share.

Facebook Style Event Creator With jQuery and ...

Create Simple Rounded News Scroller using Moo...

Live Username Availability Checking using Aja...

jQuery Login Form with Sliding effects Style...

Ajax Tutorial: Dynamic Loading of ComboBox us...

By HackingEthics

Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

16 to “Ajax Voting System: Create Ajax Rating/Voting system in Dzone and Digg Style. Part 2”

Tweets that mention Ajax Voting System: Create Ajax Rating/Voting system in Dzone and Digg Style. Part 2 | 99Points -- Topsy.com May 26, 2010 at 9:27 pm
[...] This post was mentioned on Twitter by Pablo Lara H, Pablo Lara H, 99_Points, 99_Points, 99_Points and others. 99_Points said: Dzone and Digg Style. Ajax Voting System: Create Ajax Rating/Voting system Part 2 http://bit.ly/9SCoWu [...]
[User Link:Dzone and Digg Style Ajax Voting System: Create Ajax Rating/Voting system in PHP AJAX. Fresh Demo] | Tips for Designers and Developers | tripwire magazine May 27, 2010 at 5:14 am
[...] Dzone and Digg Style Ajax Voting System: Create Ajax Rating/Voting system in PHP AJAX. Fresh Demo [...]
CSS Brigit | Dzone and Digg Style Ajax Voting System: Create Ajax Rating/Voting system in PHP AJAX. Fresh Demo May 27, 2010 at 11:23 am
Dzone and Digg Style Ajax Voting System: Create Ajax Rating/Voting system in PHP AJAX. Fresh Demo…

How to create simple ajax rating using Ajax, PHP and CSS3. In this part i am going to create Digg.com and Dzone.com voting style….
Dzone and Digg Style Ajax Voting System: Create Ajax Rating/Voting system in PHP AJAX. Fresh Demo | pro2go Designs Blog May 27, 2010 at 6:06 pm
[...] Visit Source. [...]
200 Fresh Articles for Designers, Developers and Freelancers | tripwire magazine May 29, 2010 at 6:21 pm
[...] Dzone and Digg Style Ajax Voting System: Create Ajax Rating/Voting system in PHP AJAX. Fresh Demo [...]
200 Fresh Articles for Designers, Developers and Freelancers … | Wordpress Themes Stream May 29, 2010 at 10:24 pm
[...] Dzone and Digg Style Ajax Voting System: Create Ajax Rating/Voting system in PHP AJAX. Fresh Demo [...]
Ahmad June 8, 2010 at 9:39 am
Thanks for tutorial ZeeShaN.
But not .sql file in zip…
ZeeShaN June 8, 2010 at 10:38 am
@ Ahmed
Thanks for pointing dear, I have updated this above now.
Ahmad June 8, 2010 at 4:48 pm
Thanks again.
Andrew July 4, 2010 at 5:00 pm
Hi Zeeshan,

Thanks for this script! I have tried to install it but when I click the Digg button it doesn’t update or do anything.. I think it may be that the link is empty, e.g. href=”#”

Not sure.. why its not working, any suggestions? Have you tested this script recently…?
ZeeShaN July 4, 2010 at 6:52 pm
@Andrew, thanks Andrew, I just replaced href=”#” to href=”javascript: void(0)” So that the page would never fluctuate again but its ok with functionality and its increasing the voting counter. If you have firebug installed check that is it sending ajax request or not at your installation?
Keep me inform !
Andrew July 6, 2010 at 3:57 pm
I tried once again but no luck.. nothing is being called, the counter for the digg isnt moving up when click.. this is the script in the index:

JAVASCRIPT—

//

CSS/HTML—

diggs

diggs

diggs

diggs

Ajax Voting System: Create Ajax Voting system in Digg Style.
In my previous tutorial i explain how to create simple ajax rating using ajax, php and css3. In this part i am going to create Digg.com and Dzone.com voting style.
Steve July 28, 2010 at 12:17 am
Hello,
I’m curious how to set this up to have multiple items that people can vote on. Currently, the way I have it set up, I have a mysql query that displays some posts, and each of these have a voting up and down function attached to them.

The script gets the initial information correct from the mysql database for each post. But if i click up or down on any post it starts to update all the voting functions. However, once I reload the page the correct information is displayed. For instance:

<> <><><>
Post 1 [5][10]: Hello this is post 1
Post 2 [2][7]:Hello this is post 2

If i click yes votes for post 2 5 times the information displayed will be:
Post 1 [7][10]: Hello this is post 1
Post 2 [7][7]:Hello this is post 2

However, when i reload the page this will be displayed:
Post 1 [5][10]: Hello this is post 1
Post 2 [7][7]:Hello this is post 2

The same behavior happens with down vote. Can anyone shed any light on this please? Im sorry if its hard to understand, i’ve tried to explain it the best i could!

Thanks!
ZeeShaN July 28, 2010 at 8:48 am
Hi, Actually this demo is created keeping one post in mind and you can do this just attach current post id with actions.
I mean when you are calling ajax request
$.post(“rating.php?value=”+a, {
Then attach current post id wih this
$.post(“rating.php?value=”+a+”&id=”+current_post_id, {

To get current post id in jquery function, attach post id with following links so that you can get post id and perform your action,

div id=”vwidget-419919″ class=”vwidget”>
a class=”upcount” href=”javascript: void(0)” id=”1″>1919
Now in jquery code:

$(‘.vwidget’).children(‘a’).click(function(){

var a = $(this).attr(“id”);// this will as before
var post_id = $(this).parent().attr(‘id’);// add this to get post id

if(a == 1)

var container = ‘upcount’;

else

var container = ‘downcount’;

$.post(“rating.php?value=”+a+”&post_id=”+post_id, {

}, function(response){

//$(‘.upcount’).fadeOut();

$(‘#’+post_id).children(‘.’+container).html(unescape(response));

$(‘#’+post_id).children(‘.’+container).fadeIn();

});

});

I tried to draw whole code please remove if there are bugs. Hope you will do it now.
Also you can use this post id in backend to save vote for that posting.
big July 29, 2010 at 3:39 am
good
Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL | 99Points August 8, 2010 at 8:48 pm
[...] but useful scripts which makes their effort succeeded. So after some voting system tutorials like Digg style Voting now I have come to simple ajax based polling system. This is another series of Jquery. Hope You [...]