Buttons doesn't appear after clicks on them

Question

I have one script ajax/php for vote. It's working with 4 images, 2 before click and 2 for after click.

Button 'up' and up-disable and same for button down. The idea is when user click on button up then button is changed to up-disable ie can't click on it any more. Sam for button down.

Currently when I click on up button up-disable doesn't appear.. just the image doesn't appear I'm able to click on the white space there(or at least the pointer of the mouse is changed.

This is the html&php part

   $vote_rank = 0;
   $query = $pdo->prepare("SELECT SUM(vote_rank) as vote_rank FROM ipaddress_vote_map WHERE image_id = :image_id and ip_address = :ip_address");
   $query -> bindParam(':image_id', $_GET['image_id'], PDO::PARAM_INT);
   $query -> bindParam(':ip_address', $ip_address, PDO::PARAM_INT); 
   $row = $query->execute();
   //$rowsa = $pdo->execute();
   $up = "";
   $down = "";

   if(!empty($row[0]["vote_rank"])) {
       $vote_rank = $row[0]["vote_rank"];
       if($vote_rank == -1) {
           $up = "enabled";
           $down = "disabled";
       }
       if($vote_rank == 1) {
           $up = "disabled";
           $down = "enabled";
       }
   }  
   <div class="pull-left" id="links-'.$row["image_id"].'">                                            
     <input type="hidden" id="votes-'.$row["image_id"].'" value="'.$row["votes"].'">
     <input type="hidden" id="vote_rank_status-'.$row["image_id"].'" value="'.$vote_rank.'">
       <div class="btn-votes">
            <input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].',\'1\')"'.$up.' />
                <div class="label-votes">'.$row["votes"].'</div>
            <input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].',\'-1\')"'.$down.'/>  
       </div>

This is the js function

success: function(vote_rank_status){
var votes = parseInt($('#votes-'+image_id).val());
var vote_rank_status;// = parseInt($('#vote_rank_status-'+id).val());
switch(vote_rank) {
    case "1":
    votes = votes+1;
    //vote_rank_status = vote_rank_status+1;
    break;
    case "-1":
    votes = votes-1;
    //vote_rank_status = vote_rank_status-1;
    break;
}
$('#votes-'+image_id).val(votes);
$('#vote_rank_status-'+image_id).val(vote_rank_status);

var up,down;

if(vote_rank_status == 1) {
    up="disabled";
    down="enabled";
}
if(vote_rank_status == -1) {
    up="enabled";
    down="disabled";
}   
var vote_button_html = '<input type="button" title="Up" id="up" onClick="addVote('+image_id+',\'1\')" '+up+' /><div class="label-votes">'+votes+'</div><input type="button" title="Down" id="down"  onClick="addVote('+image_id+',\'-1\')" '+down+' />';    
$('#links-'+image_id+' .btn-votes').html(vote_button_html);
}

and the css where are images.

.btn-votes input[type="button"].up {    
     background-image:url('../up.png');
}

.btn-votes input[type="button"].up:disabled {
     background-image:url('../up_off.png');
}
.btn-votes input[type="button"].down {
     background-image:url('../down.png');    
}
.btn-votes input[type="button"].down:disabled {
     background-image:url('../down_off.png');
}

So currently I'm able to see only up.png and down.png . When I click on up or down the images up_off.png and down_off.png doesn't appeared on the screen.

Answer 1

You need to actually enable/disable them somewhere. Maybe here:

//existing code
var vote_button_html = '<input type="button" title="Up" id="up" onClick="addVote(' + image_id + ',\'1\')" ' + up + ' /><div class="label-votes">' + votes + '</div><input type="button" title="Down" id="down"  onClick="addVote(' + image_id + ',\'-1\')" ' + down + ' />';
$('#links-' + image_id + ' .btn-votes').html(vote_button_html);
}
// New code for after the elements have been added to the dom
if (vote_rank_status == 1) {
    $('.btn-votes input[type="button"].up').attr('disabled', 'disabled');
    $('.btn-votes input[type="button"].down').removeAttr('disabled');
}
if (vote_rank_status == -1) {
    $('.btn-votes input[type="button"].up').removeAttr('disabled');
    $('.btn-votes input[type="button"].down').attr('disabled', 'disabled');
}