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
Download Script 
Live DemoDatabase 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.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));
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">
{
$("span.on_img").mouseover(function ()
{
$(this).addClass("over_img");
});
$("span.on_img").mouseout(function ()
{
$(this).removeClass("over_img");
});
});
$(".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);
}
});
});
</script>
HTML and PHP code. To display records form the images table.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>
<?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>//Display Updated Love Value
<?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;
}
how would i go about implying this into my blogger layout?
Nice work!
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?
thanks
thanks
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 "
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 );
estuve mirando tus post la verdad que tengo que felicitarte!!... congrats good job!
maxxdesignstudio@gmail.com
Salta - Argentina
nice work!
thanks :)
thank
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
It still wont display any images :/ I'm presuming cause I have none in the DB. Any chance you could post a screenshot up?
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 ;
thx collection it
Thx!!!!
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!
i use my wordpress ? entegre ? help me
you can user like this script on plog,wordpress.. from http://www.urorbit-tools.com
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
ı use wordpress?etregre pls me
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 ^^
thank you! for share this!
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