jQuery Love It button

Envato Authors Theme Authors
1

Hi All,

I am looking at integrating a button like this http://graphicriver.net/item/stylish-web-buttons/135612 into my page and want to use jQuery to make the numbers go up once someone clicks the button.

I want it to change the number with a nice fade and then save the number to a DB.

Can someone point me in the right direction, an example or tutorial?

thanks

craig

2

I could make this for you if you want,

send me a message.

3

Hi :slight_smile:

Here is a simple example how you can do it.

HTML button:

 <a href="#" id="like-it"I like it

SQL database:
Id field should be of type int, and have the AUTO_INCREMENT attribute. This option automatically increases the id for each new record. The title field (the field isn’t important) should be of type text, and value field of type int.

PHP script:

<?php
mysql_connect("host", "login", "password") or die ("Error.");
  mysql_select_db("database_name") or die ("error");
$rat = mysql_query("SELECT * FROM table_name WHERE id=1;");
if($res = mysql_fetch_assoc($rat)) {
 print ' '.($res['value']-1).' '; // id="value"
}
?>

jQuery:

$(document).ready(function() {
 $("#like-it").unbind().bind("click", function() {
  $.ajax({
   type: 'POST',
   url: 'likeit.php',
   data: 'action=add',
   success: function(result) {
    $("#value").html(result);
   }
  });
  return false;
 });
});

likeit.php file:

<?php
mysql_connect("host", "login", "password") or die ("Error.");
  mysql_select_db("database_name") or die ("error");
$increase = "UPDATE table_name SET value=vale+1 WHERE id=1;";
$active_rate = mysql_query("SELECT * FROM test WHERE id=1;");
$val = 0;
if($rt = mysql_fetch_assoc($active_rate)) {
 $val = $rt['value'];
}
if($_POST['action'] == 'add') {
 mysql_query($increase);
 print $val++;
}   
?>

But, the script have one problem: It hasn’t a filter IP :frowning:

4

Hey Lukasz,

Thanks for the reply, i think some of your code is missing as i have follwed what you have and now the number in my button just dissapears.

this is what i have in my index.html

And in my added.js file i have

$(document).ready(function() {
 $("#like-it").unbind().bind("click", function() {
  $.ajax({
   type: 'POST',
   url: 'likeit.php',
   data: 'action=add',
   success: function(result) {
    $("#value").html(result);
   }
  });
  return false;
 });
});

And in my loveit.php file i have

<?php

mysql_connect("localhost", "web183-loveit", "password") or die ("Error.");
mysql_select_db("web183-loveit") or die ("error");

	$increase = "UPDATE results SET value=value+1 WHERE id=1;";
	$active_rate = mysql_query("SELECT * FROM results WHERE id=1;");
	$val = 0;

if($rt = mysql_fetch_assoc($active_rate)) {
	$val = $rt['value'];
}

if($_POST['action'] == 'add') {
	mysql_query($increase);
	print $val++;
}

$rat = mysql_query("SELECT * FROM results WHERE id=1;");

if($res = mysql_fetch_assoc($rat)) {
	print '
5

Your button should look like this:






<?php
mysql_connect("localhost", "web183-loveit", "password") or die ("Error.");
mysql_select_db("web183-loveit") or die ("error");
$rat = mysql_query("SELECT * FROM results WHERE id=1;");

if($res = mysql_fetch_assoc($rat)) {
    print ($res['value']-1); 
}   

?>


LOVE IT

Or you can use include php.

6

You could also keep your PHP separate from your html.

On load have ajax get the number

$(function(){
  $.ajax({
    .. pretty much same call as before, just no updating of the database
  });
}
7
Lukasz_Czerwinski said

Your button should look like this:






<?php
mysql_connect("localhost", "web183-loveit", "password") or die ("Error.");
mysql_select_db("web183-loveit") or die ("error");
$rat = mysql_query("SELECT * FROM results WHERE id=1;");

if($res = mysql_fetch_assoc($rat)) {
    print ($res['value']-1); 
}   

?>


LOVE IT

Or you can use include php.

So now i have this in my index file…


























<?php include 'value.php' ?>

LOVE IT

and have this in my value.php

<?php

mysql_connect("localhost", "web183-loveit", "password") or die ("Error.");
mysql_select_db("web183-loveit") or die ("error");

$rat = mysql_query("SELECT * FROM results WHERE id=1;");

if($res = mysql_fetch_assoc($rat)) {
    print ($res['value']-1); 
}

?>

But nothing appears in the

tags when i load the index.php

Please see here http://bit.ly/dKx15z

Thanks for helping on this i do really appreciate it.

And TutelageSystems im not sure how to add the ajax stuff : )

8

Ok, i now have the LOVE IT button displaying the value from the DB.

I added a value of 1 to the first entry in the DB and i get a 0 on my button…

please see http://bit.ly/dKx15z

but it doesnt seem to be saving the new number to the DB and incrementing it?

any ideas?

9

You haven’t the likeit.php file on your server, but there is the loveit.php file. So, you can rename the file or modify the url in added.js file. :slight_smile:

10

What a ding bat!!!

Thanks i missed that and it now works thanks very much.

:slight_smile:

11

Cool,

What you can also do is add another column in your database table called last_ip. If a person then clicks the button, the php script will check if the last_ip matches your ip.
If it doesn’t match, then it’ll increment the value by 1 and then store your ip in last_ip. If it does match, then it won’t increment the value.

This solves the problem of people clicking the button more than once :slight_smile:

12
TolputtKeeton said

What a ding bat!!!

Thanks i missed that and it now works thanks very much.

:slight_smile:

I’m happy that I helped you :slight_smile: