Didn't show counter number and counter bar in php voting system - php

Question

here is my index.html:
<div style="margin:50px">
<img src="likebig.png" alt="Like" border="0">
<img src="dislike.png" alt="dislike" border="0">
<div id="votebox">
<span id='close'>X</span>
<div style="height:13px">
<div id="flash">Loading........</div>
</div>
<div id="content"></div>
</div>
</div>
and rating.php:
include("db.php");
if($_POST['id'] > 0 && $_POST['name']> 0){
$id=mysql_escape_String($_POST['id']);
$name=mysql_escape_String($_POST['name']);
mysql_query("update messages set $name=$name+1 where id='$id'");
$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;
$up_per=($up_value*100)/$total;
$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="likeup.png">
</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="likedown.png">
</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
}
and this is ajax 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").click(function() {
$("#votebox").slideUp("slow");
});
});
</script>
I have tried for a long time, still i can't able to fix error.
It didn't show counter number and count-bar after clicking the like or unlike button.
Now it shows like this http://s15.postimg.org/e6pvjkrej/Untitled_1.png.
I need like this: http://s15.postimg.org/qmmldbkqj/Untitled_2.png
May how can i fix this? can anyone help me to fix this ?
thanks in advance.

Answer 1

It was not only the "greenbar" and "redbar". The problem was also the output. You need to echo all the html so that ajax could get the html.
<?php
include("db.php");
if($_POST['id'] > 0 && $_POST['name']> 0){
$id=mysql_escape_String($_POST['id']);
$name=mysql_escape_String($_POST['name']);
mysql_query("update messages set $name='".$name+1."' where id='".$id."'");
$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;
$up_per=($up_value*100)/$total;
$down_per=($down_value*100)/$total;
//HTML Output for AJAX Calls
echo "<div style='margin-bottom:10px'>
<b>Ratings for this blog</b> (". $total ." total)
</div>
<table width='700px'>
<tr>
<td width='30px'>
<img src='likeup.png'>
</td>
<td width='60px'>". $up_value ."</td>
<td width='600px'><div id='greebar' style='width:'". $up_per ."%'></div></td>
</tr>
<tr>
<td width='30px'>
<img src='likedown.png'>
</td>
<td width='60px'>".$down_value."</td>
<td width='600px'><div id='redbar' style='width:'". $down_per ."%'></div></td>
</tr>
</table>";
}
?>
Here's the code for HTML Output from the tutorial for reference:
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>';
link