Question

i’m trying to make some change in the following code which updates the number of votes by clicking on it with jquery. However, as shown in the image below, i want to display the vote number out of the box. I want to make it so that I click on the same green box, however I display the number out of the green box. I having difficulty making that.

Here’s the original code:
Jquery:

<script type="text/javascript">
$(function() {

$(".vote").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);

if(name=='up'){
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "up_vote.php",
   data: dataString,
   cache: false,

   success: function(html)   {
    parent.html(html);
    }  }); 
}else{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
   type: "POST",
   url: "down_vote.php",
   data: dataString,
   cache: false,

   success: function(html)   {
       parent.html(html);
  }   
 });
}
return false;
 });
});
</script>

and here’s html part:

<div id="main">
<div class="box1">
<div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a></div>
</div>
<div class='box2' ><?php echo $msg; ?></div>
</div>

Here’s Css:

<style type="text/css">
body{
font-family:'Georgia', Times New Roman, Times, serif;
}
#main{
height:80px; border:1px dashed #29ABE2;margin-bottom:7px;
width:500px;
}

a{
color:#DF3D82;
text-decoration:none;
}

a:hover{
color:#DF3D82;
text-decoration:underline;
}

.up{
height:40px; font-size:24px; text-align:center; background-color:#009900; margin-bottom:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.up a{
color:#FFFFFF;
text-decoration:none;
}

.up a:hover{
color:#FFFFFF;
text-decoration:none;
}

.down{
height:40px; font-size:24px; text-align:center; background-color:#cc0000; margin-top:2px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;
}

.down a{
color:#FFFFFF;
text-decoration:none;
}

.down a:hover{
color:#FFFFFF;
text-decoration:none;
}

.box1{
float:left; height:80px; width:50px;
}

.box2{
float:left; width:440px; text-align:left;
margin-left:10px;height:60px;margin-top:10px;
font-weight:bold;
font-size:18px;
}


</style>

Thank you very much for helping.

Answer 1

Here’s a fiddle for you.

In short, number goes inside an element defined by parent variable. Replace parent = $(this) with parent = $(this).parents('.box1') and parent.html(html) inside ajax callback with parent.append(html)

Update

After a bit more fiddling: http://jsfiddle.net/CE4xh/1/.

I added <div class="number"></div> after <div class="up">, this is a placeholder for a number.
There is a CSS class .number for it, making it red and centered. In this variant of the code you don’t have to change ajax callbacks, you just need to set parent = $(this).parents('.box1').find('.number')