Favorite Rating with jQuery and Ajax.
Wall Script
Wall Script
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.
web notification

69 comments:

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

    ReplyDelete
  2. 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?

    ReplyDelete
  3. 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 "

    ReplyDelete
  4. 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 );

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

    [email protected]

    Salta - Argentina

    ReplyDelete
  6. 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

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

    ReplyDelete
  8. 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 ;

    ReplyDelete
  9. 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!

    ReplyDelete
  10. i use my wordpress ? entegre ? help me

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

    ReplyDelete
  12. 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

    ReplyDelete
  13. ı use wordpress?etregre pls me

    ReplyDelete
  14. 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 ^^

    ReplyDelete
  15. thank you! for share this!

    ReplyDelete
  16. 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.

    [email protected]

    Thanks
    DANNYSTYLE

    ReplyDelete
  17. 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!

    ReplyDelete
  18. 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

    ReplyDelete
  19. share admin thanks a lot for sharring a very successful and wonderful

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

    ReplyDelete
  21. Very useful in terms of sharing people. Thank you.

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

    ReplyDelete
  23. Your site has very nice, thank you for sharing.

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

    ReplyDelete
  25. 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?

    ReplyDelete
  26. 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:)

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

    ReplyDelete
  28. 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

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

    ReplyDelete
  30. 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

    ReplyDelete
  31. great, thanks for sharing. :)

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

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

    ReplyDelete
  34. Hello buddy, Your tutorials were very nice.

    ReplyDelete
  35. Very good informations.Thank you for sharing us.

    ReplyDelete
  36. sharing is very beautiful and high quality

    ReplyDelete
  37. Sharing a very informative and useful

    ReplyDelete
  38. The subject is too interesting, thanks for sharing

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

    ReplyDelete
  40. 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?

    ReplyDelete
  41. 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

    ReplyDelete
  42. 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.

    ReplyDelete
  43. Muchas gracias funciona perfecto IE7 incluido

    ReplyDelete
  44. 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.

    ReplyDelete
  45. 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 :)

    ReplyDelete
  46. thanks Ryan. yours worked well

    ReplyDelete
  47. 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

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

    ReplyDelete
  49. Can i use it for Bookmark or Favorite ?

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

    ReplyDelete
  50. Thank You :)

    I made it for Bookmarked and working good :)

    ReplyDelete
  51. 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"



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

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

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

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

    ReplyDelete
  56. Please change it for PHP7, Mysqli

    ReplyDelete

mailxengine Youtueb channel
Make in India
X