9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Tuesday, September 22, 2009

Favorite Rating with jQuery and Ajax.

I received a mail from my reader that asked to me how to implement Show the love rating system like amypink.com. So I had designed Favorite Rating with jQuery and Ajax.. It's simple just changing little code on my old post Voting system with jQuery, Ajax and PHP.. Take a look at live demo

Favorite Rating with jQuery and Ajax.


Download Script     Live Demo

Database Design
images table images details
CREATE TABLE images(
img_id INT PRIMARY KEY AUTO_INCREMENT,
img_name VARCHAR(60),
love INT,
image_ip table storing ip-address.
CREATE TABLE image_IP(
ip_id INT PRIMARY KEY AUTO_INCREMENT,
img_id_fk INT,
ip_add VARCHAR(40),
FOREIGN KEY(img_id_fk)
REFERENCES images(img_id));



love.php
Javascript Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
"></script>
<script type="text/javascript">
//Image Hover Pink Heart to White Heart
$(document).ready(function()
{
$("span.on_img").mouseover(function ()
{
$(this).addClass("over_img");
});

$("span.on_img").mouseout(function ()
{
$(this).removeClass("over_img");
});
});

//Show The Love
$(function() {
$(".love").click(function()
{
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this);
$(this).fadeOut(300);
$.ajax({
type: "POST",
url: "ajax_love.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
parent.fadeIn(300);
}
});
return false;
});
});

</script>

HTML and PHP code. To display records form the images table.
<?php
include('config.php');
$sql=mysql_query("select * from images");
while($row=mysql_fetch_array($sql))
{
$img_id=$row['img_id'];
$img_url=$row['img_url'];
$love=$row['love'];
?>
<div>
<div class="box" align="left">
<a href="#" class="love" id="<?php echo $img_id; ?>">
<span class="on_img" align="left"> <?php echo $love; ?> </span>
</a>
</div>
<img src='<?php echo $img_url; ?>' />
</div>
<?php
}
?>

ajax_love.php
Contains PHP code.
<?php
include("config.php");
$ip=$_SERVER['REMOTE_ADDR'];//client ip address
if($_POST['id'])
{
$id=$_POST['id'];
//IP-address verification 
$ip_sql=mysql_query("select ip_add from image_IP where img_id_fk='$id' and ip_add='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0)
{
// Updateing Love Value
$sql = "update images set love=love+1 where img_id='$id'";
mysql_query( $sql);
// Inserting Client IP-address
$sql_in = "insert into image_IP (ip_add,img_id_fk) values ('$ip','$id')";
mysql_query( $sql_in);

$result=mysql_query("select love from images where img_id='$id'");
$row=mysql_fetch_array($result);
$love=$row['love'];

?>
 //Display Updated Love Value

<span class="on_img" align="left"><?php echo $love; ?></span>
<?php
}
else
{
// Already Loved
echo 'NO !';
}
}
?>

CSS Code
.box
{
background-color:#303030; padding:6px;
height:17px;
}
.on_img
{
background-image:url(on.gif);
background-repeat:no-repeat;
padding-left:35px;
cursor:pointer;
width:60px;
}
.over_img
{
background-image:url(over.gif);
background-repeat:no-repeat;
padding-left:35px;
cursor:pointer;
width:60px;
}

The testking offers you incredible testking VCP-410 online training with testking 70-640 web designing tutorials to help you learn how to improve the website contents using jQuery script.
Comments
{ 66 comments }
LaaLaa said...

how would i go about implying this into my blogger layout?

emerz said...

Nice work!

Anonymous said...

Nice Work.Code explanation helps the developer to learn the concepts easily.Can you help me in the below situation.In our web page,3000 records are displayed in the tabular format fetching from the database.Below the table there are 9 text fields.Ajax is used in the one of text field to populate the remaining 8 text fields.But since the page has more than 3000 records,ajax call is hanging up the browser.Can you suggest us a way to improve the ajax call performance?

Anonymous said...

thanks

Anonymous said...

thanks

ValsiS.ro said...

i try to run this script :( but dosn;t work :( ... i can't create that tabele in my database

"Error

SQL query:

CREATE TABLE images(
img_id INT PRIMARY KEY AUTO_INCREMENT ,
img_name VARCHAR( 60 ) ,
love INT,
CREATE TABLE image_IP(
ip_id INT PRIMARY KEY AUTO_INCREMENT ,
img_id_fk INT,
ip_add VARCHAR( 40 ) ,
FOREIGN KEY ( img_id_fk ) REFERENCES images( img_id )
);

MySQL said: Documentation
#1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'CREATE TABLE image_IP(
ip_id INT PRIMARY KEY AUTO_INCREMENT,
img_id_fk INT,
i' at line 12 "

ValsiS.ro said...

in images table ... is the problem ...

CREATE TABLE images(
img_id INT PRIMARY KEY AUTO_INCREMENT,
img_name VARCHAR(60),
love INT,

wher is the img_html ? and this cod is not close );

Maximiliano said...

estuve mirando tus post la verdad que tengo que felicitarte!!... congrats good job!

maxxdesignstudio@gmail.com

Salta - Argentina

ghprod said...

nice work!

thanks :)

Anonymous said...

thank

Matt Hojo said...

CREATE TABLE IF NOT EXISTS `images` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`img_name` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`love` int(11) NOT NULL,
PRIMARY KEY (`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;


CREATE TABLE IF NOT EXISTS `image_IP` (
`ip_id` int(11) NOT NULL AUTO_INCREMENT,
`img_id_fk` int(11) NOT NULL,
`ip_add` varchar(40) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`ip_id`),
FOREIGN KEY (`img_id_fk`) REFERENCES images(`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;




That should work, if not I dont have a clue

Matt Hojo said...

It still wont display any images :/ I'm presuming cause I have none in the DB. Any chance you could post a screenshot up?

Hojo said...

CREATE TABLE IF NOT EXISTS `images` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`img_url` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`love` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;


CREATE TABLE IF NOT EXISTS `image_IP` (
`ip_id` int(11) NOT NULL AUTO_INCREMENT,
`img_id_fk` int(11) NOT NULL,
`ip_add` varchar(40) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`ip_id`),
FOREIGN KEY (`img_id_fk`) REFERENCES images(`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

wespai said...

thx collection it

Ivan said...

Thx!!!!

Pol Moneys said...

the same as Matt Hojo happens to me ---->

"It still wont display any images :/ I'm presuming cause I have none in the DB."

Any chance you could clarify a little bit more this issue? thanks in advance!

seo said...

i use my wordpress ? entegre ? help me

bastr3 said...

you can user like this script on plog,wordpress.. from http://www.urorbit-tools.com

majdi said...

faute dans la ligne 5 de la page ajax_love.php :
remplacer par :
if(isset($_POST['id']))
{...
je vais l'integrer dans mon site : www.houidi.com
Merci amigos pour ce surper tutorial

Anonymous said...

ı use wordpress?etregre pls me

Anonymous said...

Thanks for this useful tuto !

Just one question : for the jQuery function related to Ajax, do i have to put in in the page i want to use it or can i put it in the footer/header ?

Thanks ^^

Anonymous said...

thank you! for share this!

Anonymous said...

Hy! ... can you post or send me a sample database? ...

I can create the database and I fill it up with records but it doesn't works.

enastar@hotmail.com

Thanks
DANNYSTYLE

Miss M. said...

Same problem as everyone else. I get to love.php fine, but all images are blank.

The only thing I see on the page is "Show The Love" with no images?

fix please?

thanks!

maikol arley cucunuba salazar said...

The application is based on facebook and when you click on the link megusta an asynchronous request using jQuery, PHP and MySQL, where information is stored by clicking on the database with this if you reload the page the changes did not affected I hope that the application is of his total pleasure
You can see the working application here:http://www.getvay.com/Like/index.php y la puede descargar de aqui: http://www.getvay.com/pg/file/macs1407/read/1821/like-facebook

hali yikama said...

share admin thanks a lot for sharring a very successful and wonderful

Henk said...

Yes, yes. Thanks its nice lesson.
It works fine for me...
Regards Henk from the Nethetlands,

palet said...

Very useful in terms of sharing people. Thank you.

Cöp Konteyner said...

I always follow your site thank you wish you continued success. Thank you.

Web Tasarim said...

thanks for sharing web design

Acer Destek said...

Your site has very nice, thank you for sharing.

Hali Yikama said...

nice work at a level of social solidarity and the opportunity to share
a very good time thank you..

DENiAL said...

all I'm getting is broken image, I can get the love bar to show and work, however, I can not seem to get any images to show up. What is the proper way to enter the image url into the database so it will show?

Srinivas Tamada said...

@Hali

:)

bosverina.q. said...

Show The Love


Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/*****/public_html/new/love.php on line 121

what is this? please help:)

Satyajeet said...

@majdi uhmmm nice thing.....
@bosverina send me your script at satlavida[at]gmail[dot]com

roma2509 said...

HI Srinivas Tamada. I like very match your posts.
But can you help me please with some modification for this. I want
that user can upload on my site his photos and after that his photos
should by seen on my site for other user so they can vote them. I'll
be very grateful if you could help me. I hope I explained the problem
well.
P.S. All the best and keep up the good work, you are very good

teeth whitening said...

This helped me a lot in compiling my blog in a proper manner.

chris said...

same error,

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/*****/public_html/new/love.php on line 121

NameCo said...

great, thanks for sharing. :)

Web Hosting India said...

Hello buddy, Your tutorials were very nice. I was fully satisfied by your blog. Kindly maintain this forever. Thank you.

beşiktaş said...

I congratulate your website very useful to people. We expect also to my own website.

havacılık haberleri said...

Hello buddy, Your tutorials were very nice.

dell destek said...

Very good informations.Thank you for sharing us.

dell servis said...

sharing is very beatiful thanks

fuar standı said...

sharing is very beautiful and high quality

Perde said...

Sharing a very informative and useful

Anonymous said...

The subject is too interesting, thanks for sharing

hurda said...

sharing is very successful

john said...

it is a really nice script...thanks man... how to write a cookie storing different value... hope you can help me.

Anonymous said...

I'm new to jQuery, php and Ajax, but I managed to get it to work. The problem is that it now shows all the images in the database. How can I get it to only show a specific img_id?

Masterproject Brazil said...

Would like to implement this is well, however as a noob, no idea where to start with this?

I use wordpress, where to all the codes go? Maybe there are tutorials of similar things? A few words of help please

Loksly said...

You should prevent your code from sql injection. Take a look at filter_var, mysql_real_escape_string and intval functions, before composing SQL sentences.

mynet sohbet said...

thank you admin

Anonymous said...

Muchas gracias funciona perfecto IE7 incluido

Anonymous said...

I have a problem. This code does not work if my page's url is with a $_GET variable like this "m_profil.php/?mid=3". Please help me.

ryan setiawan said...

first, the correct tables are :

CREATE TABLE IF NOT EXISTS `images` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`img_url` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`img_url` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`love` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;


CREATE TABLE IF NOT EXISTS `image_IP` (
`ip_id` int(11) NOT NULL AUTO_INCREMENT,
`img_id_fk` int(11) NOT NULL,
`ip_add` varchar(40) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`ip_id`),
FOREIGN KEY (`img_id_fk`) REFERENCES images(`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

then, in phpmyadmin, run following the SQL :

insert into images (img_url) values (1.png)

that's it.

if you have "parse error bla bla bla" when you click the love button, change the "<?" in ajax_love.php line 24 with "<?php"

that's should work :)

ERISP said...

thanks Ryan. yours worked well

Anonymous said...

Thanks for your great tutorial.
Could you give me some advice on how to modify the code, so that it is only possible to vote for one image (if I click the heart on one of the images, the others should not be clickable anymore).
Thanks

Vattenskada said...

Great article. It's always nice when you can not only be informed, but also entertained!

Anonymous said...

Can i use it for Bookmark or Favorite ?

i need it to change for favorite how much value need to edit?

sam said...

Thank You :)

I made it for Bookmarked and working good :)

Zeeshan Akhter said...

Here is the fix of all small problems
Update the answer of "ryan setiawan"


DROP TABLE IF EXISTS `images`;
CREATE TABLE IF NOT EXISTS `images` (
`img_id` int(11) NOT NULL AUTO_INCREMENT,
`img_name` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`img_url` varchar(500) COLLATE utf8_unicode_ci NOT NULL,
`love` int(11) NOT NULL,
PRIMARY KEY (`img_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;

INSERT INTO `images` (`img_id`, `img_name`, `img_url`, `love`) VALUES
(1, '1.png', '1.png', 1),
(2, '2.png', '2.png', 1),
(3, '3.png', '3.png', 1);

DROP TABLE IF EXISTS `image_IP`;
CREATE TABLE IF NOT EXISTS `image_IP` (
`ip_id` int(11) NOT NULL AUTO_INCREMENT,
`img_id_fk` int(11) NOT NULL,
`ip_add` varchar(40) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`ip_id`),
KEY `img_id_fk` (`img_id_fk`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;

INSERT INTO `image_IP` (`ip_id`, `img_id_fk`, `ip_add`) VALUES
(1, 1, '110.39.248.175'),
(2, 3, '110.39.248.175'),
(3, 2, '110.39.248.175');




if you have "parse error bla bla bla" when you click the love button, change the "<?" in ajax_love.php line 24 with "<?php"



mögel said...

Great article. It's always nice when you can not only be informed, but also entertained!

fuktskada said...

Interesting to see ... thank you it's well done :)

internetmarknadsföring said...

Interesting to see ... thank you it's well done :)

Post a Comment