Some people requested to me from my readers in united states via the mail is how to create youtube like rating with Jquery and Ajax. For their request to day in this tutorial, i will show you how to implement Youtube like rating with Jquery. It is so easy and nice with quick bar.
I had designed a simple script for you with PHP, Ajax and Jquery. I am sure that you will like it seriously. Provide a demo screenshot below.
Read Also:
1. Make A Simple Java Table Program (With Example Code)
2. How To Submit Jquery Duplicate Fields Form with PHP
3. How To Make Flash Effect Image Loading With Jquery
4. How To Make Chatting Application with Jquery and Ajax
Messages Table Here:
Contains PHP code. If name = up it will update UP else DOWN
I had designed a simple script for you with PHP, Ajax and Jquery. I am sure that you will like it seriously. Provide a demo screenshot below.
Read Also:
1. Make A Simple Java Table Program (With Example Code)
2. How To Submit Jquery Duplicate Fields Form with PHP
3. How To Make Flash Effect Image Loading With Jquery
4. How To Make Chatting Application with Jquery and Ajax
Youtube like Rating with Jquery and Ajax
Database DesignMessages Table Here:
CREATE TABLE messages(index.php
id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT,
up INT,
down INT);
<script type="text/javascript" src="http://ajax.googleapis.com/rating.php
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".like").click(function()
{
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
$("#votebox").slideDown("slow");
$("#flash").fadeIn("slow");
$.ajax
({
type: "POST",
url: "rating.php",
data: dataString,
cache: false,
success: function(html)
{
$("#flash").fadeOut("slow");
$("#content").html(html);
}
});
});
// Close button action
$(".close").click(function()
{
$("#votebox").slideUp("slow");
});
});
</script>
//HTML Code
<a href="#" class="like" id="1" name="up">Like</a>
--
<a href="#" class="like" id="1" name="down">Dislike</a>
<div id="votebox">
<span id='close'><a href="#" class="close">X</a></span>
<div id="flash">Loading........</div>
<div id="content">
</div>
</div>
Contains PHP code. If name = up it will update UP else DOWN
<?phpCSS
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$name=mysql_escape_String($_POST['name']);
// Vote update
mysql_query("update messages set $name=$name+1 where id='$id'");
// Getting latest vote results
$result=mysql_query("select up,down from messages where id='$id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
$down_value=$row['down'];
$total=$up_value+$down_value; // Total votes
$up_per=($up_value*100)/$total; // Up percentage
$down_per=($down_value*100)/$total; // Down percentage
//HTML output
echo '<b>Ratings for this blog</b> ( '.$total.' total)
Like :'.$up_value.'
<div id="greebar" style="width:'.$up_per.'%"></div>
Dislike:'.$down_value.'
<div id="redbar" style="width:'.$down_per.'%"></div>';
}
?>
#voteboxEnjoy now your video with youtube like rating. Hopefully, you successfully have done to create youtube like rating with jquery and ajax(php, css, jquery and ajax).
{
border:solid 1px #dedede; padding:3px;
display:none;
padding:15px;
width:700px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#greebar
{
float:left;
background-color:#aada37;
border:solid 1px #698a14;
width:0px;
height:12px;
}
#redbar
{
float:left;
background-color:#cf362f;
border:solid 1px #881811;
width:0px;
height:12px;
}
#close
{
float:right; font-weight:bold;
padding:3px 5px 3px 5px;
border:solid 1px #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}