ใครก็ได้ครับช่วยสอนแปลง Code Jquery ตัวนี้ให้มันใช้ได้จริงทีครับ
เป็นระบบโหวตแบบ Youtube อะครับไปหามาเวบนอกมา
คือผมมาดัดแปลงมั่วแล้วใช้ไม่ได้ครับ
คือผมอยากรู้แก้ตรงไหนจะสามารถนำมาใช้ได้จริงครับ
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WebSpeaks.in</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script language="javascript">
$(document).ready(function()
{
var postData=0;
var topicID="";
$('#btns #voteup').click(function()
{
postData=1;
topicID=$('#btns').attr('topicID');
voteIt();
});
$('#btns #votedown').click(function()
{
postData=2;
topicID=$('#btns').attr('topicID');
voteIt();
});
function voteIt()
{
$("#votebox").slideDown("slow");
$("#loading").fadeIn("slow");
if(postData!=0)
{
$.ajax
({
type: "POST",
url: "voteit.php",
data: "action="+ postData + "&topicID=" + topicID,
cache: false,
success: function(html)
{
$("#loading").fadeOut("slow");
$("#content").html(html);
}
});
}
}
$(".close").click(function()
{
$("#votebox").slideUp("slow");
});
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
#votebox
{
border:solid 1px #dedede;
display:none;
padding:15px;
width:700px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.close
{
color:#333
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#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;
}
#loading
{
display:none;
font-size:10px;
color:#666666;
}
#close
{
float:right; font-weight:bold; padding:3px 5px 3px 5px; border:solid 1px #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#btns{
margin-bottom:40px;
padding-bottom:10px;
}
#voteup{
float:left;
margin:5px;
}
#votedown{
float:left;
margin:5px;
}
a img{
border:0px;
}
</style>
</head>
<body>
<div style="margin:50px">
<div id="btns" topicID='1'>
<div><a href='javascript:void(0)' alt='VoteUp' title='Vote Up' id='voteup'><img src='likebig.png'></a></div>
<div><a href='javascript:void(0)' alt='VpteDown' title='Vote Down' id='votedown'><img src='dislike.png'></a></div>
</div>
<div id="votebox">
<div id='close'><a href="#" class="close" title="Close This">X</a></div>
<div style="height:13px">
<div id="loading">Loading........</div>
</div>
<div id="content"></div>
</div>
</div>
</body>
</html>
Voting.php
<?php
include("config.php");
if($_REQUEST['action'])
{
$action=mysql_escape_String($_REQUEST['action']);
$p_id=mysql_escape_String($_REQUEST['p_id']);
$result=mysql_query("select up,down from youtube where id='$p_id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
$down_value=$row['down'];
if($action=="1")
{
mysql_query("update youtube set up=$up_value+1 where id='$p_id'");
}
else if($action=="2")
{
mysql_query("update youtube set down=$down_value+1 where id='$p_id'");
}
$result=mysql_query("select up,down from youtube where id='$p_id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
$down_value=$row['down'];
$total=$up_value+$down_value;
if($up_value>0)
{
$up_per=($up_value*100)/$total;
}
if($down_value>0)
{
$down_per=($down_value*100)/$total;
}
?>
<div style="margin-bottom:10px">
<b>Ratings for this blog</b> ( <?php echo $total; ?> total)
</div>
<table width="700px">
<tr>
<td width="30px"><img src="up.jpeg"></td>
<td width="60px"><?php echo $up_value; ?></td>
<td width="600px"><div id="greebar" style="width:<?php echo $up_per; ?>%"></div></td>
</tr>
<tr>
<td width="30px"><img src="down.jpeg"></td>
<td width="60px"><?php echo $down_value; ?></td>
<td width="600px"><div id="redbar" style="width:<?php echo $down_per; ?>%"></div></td>
</tr>
</table>
<?php
}
?>
คือผมมาดัดแปลงมั่วแล้วใช้ไม่ได้ครับ
คือผมอยากรู้แก้ตรงไหนจะสามารถนำมาใช้ได้จริงครับ
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WebSpeaks.in</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script language="javascript">
$(document).ready(function()
{
var postData=0;
var topicID="";
$('#btns #voteup').click(function()
{
postData=1;
topicID=$('#btns').attr('topicID');
voteIt();
});
$('#btns #votedown').click(function()
{
postData=2;
topicID=$('#btns').attr('topicID');
voteIt();
});
function voteIt()
{
$("#votebox").slideDown("slow");
$("#loading").fadeIn("slow");
if(postData!=0)
{
$.ajax
({
type: "POST",
url: "voteit.php",
data: "action="+ postData + "&topicID=" + topicID,
cache: false,
success: function(html)
{
$("#loading").fadeOut("slow");
$("#content").html(html);
}
});
}
}
$(".close").click(function()
{
$("#votebox").slideUp("slow");
});
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
#votebox
{
border:solid 1px #dedede;
display:none;
padding:15px;
width:700px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.close
{
color:#333
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#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;
}
#loading
{
display:none;
font-size:10px;
color:#666666;
}
#close
{
float:right; font-weight:bold; padding:3px 5px 3px 5px; border:solid 1px #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#btns{
margin-bottom:40px;
padding-bottom:10px;
}
#voteup{
float:left;
margin:5px;
}
#votedown{
float:left;
margin:5px;
}
a img{
border:0px;
}
</style>
</head>
<body>
<div style="margin:50px">
<div id="btns" topicID='1'>
<div><a href='javascript:void(0)' alt='VoteUp' title='Vote Up' id='voteup'><img src='likebig.png'></a></div>
<div><a href='javascript:void(0)' alt='VpteDown' title='Vote Down' id='votedown'><img src='dislike.png'></a></div>
</div>
<div id="votebox">
<div id='close'><a href="#" class="close" title="Close This">X</a></div>
<div style="height:13px">
<div id="loading">Loading........</div>
</div>
<div id="content"></div>
</div>
</div>
</body>
</html>
Voting.php
<?php
include("config.php");
if($_REQUEST['action'])
{
$action=mysql_escape_String($_REQUEST['action']);
$p_id=mysql_escape_String($_REQUEST['p_id']);
$result=mysql_query("select up,down from youtube where id='$p_id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
$down_value=$row['down'];
if($action=="1")
{
mysql_query("update youtube set up=$up_value+1 where id='$p_id'");
}
else if($action=="2")
{
mysql_query("update youtube set down=$down_value+1 where id='$p_id'");
}
$result=mysql_query("select up,down from youtube where id='$p_id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
$down_value=$row['down'];
$total=$up_value+$down_value;
if($up_value>0)
{
$up_per=($up_value*100)/$total;
}
if($down_value>0)
{
$down_per=($down_value*100)/$total;
}
?>
<div style="margin-bottom:10px">
<b>Ratings for this blog</b> ( <?php echo $total; ?> total)
</div>
<table width="700px">
<tr>
<td width="30px"><img src="up.jpeg"></td>
<td width="60px"><?php echo $up_value; ?></td>
<td width="600px"><div id="greebar" style="width:<?php echo $up_per; ?>%"></div></td>
</tr>
<tr>
<td width="30px"><img src="down.jpeg"></td>
<td width="60px"><?php echo $down_value; ?></td>
<td width="600px"><div id="redbar" style="width:<?php echo $down_per; ?>%"></div></td>
</tr>
</table>
<?php
}
?>
config.php
database