jquery - how to disable button when it's clicked and enable another button using ajax -
i want disable button when it's clicked, , enable button using ajax.
this script , dislike buttons:
function like(id,type,target){ $.ajax({ //condition , unlike button $('button').click(function like() { var classname = $(this).attr('id'); if(classname == 'positive') { $('button.positive').attr('disabled', 'disabled'); $('button.negative').attr('disabled', false); } else { $('button.negative').attr('disabled', 'disabled'); $('button.positive').attr('disabled', false); } } //like unlike mysql database type:'post', url:'ratinglike.php', data:'id='+id+'&type='+type, success:function(msg){ if(msg == 'err'){ alert('some problem occured, please try again.'); }else{ $('#'+target).html(msg); } }); }); }
html , unlike buttons:
<!-- icon html --> <!-- php condition inside works need refresh page before see disabled --> <button class="fa fa-thumbs-up" id = "positive" <?php if($userlike == 1){?>disabled<?php } ?> onclick="like(<?php echo $trow['id']; ?>,1,'like_count<?php echo $trow['id']; ?>')"></button> <!-- counter --> <span class="counter" id="like_count<?php echo $trow['id']; ?>"><?php echo $trow['like_num']; ?></span> <button class="fa fa-thumbs-down" id="negative" <?php if($userdislike == 1){?>disabled<?php } ?> onclick="like(<?php echo $trow['id']; ?>,0,'dislike_count<?php echo $trow['id']; ?>')" ></button> <!-- counter --> <span class="counter" id="dislike_count<?php echo $trow['id']; ?>"><?php echo $trow['dislike_num']; ?></span>
can me?
you may try working sample. please modify meet needs.
//script , dislike button function like(btn, id, type) { var button = $(btn); // disable button cant click again button.prop('disabled', true); $.ajax({ //like unlike mysql database type: 'post', url: 'ratinglike.php', data: 'id=' + id + '&type=' + type, success: function(msg) { if (msg == 'err') { alert('some problem occured, please try again.'); } else { var otherbutton = button.siblings('button'); button.prop('disabled', true); otherbutton.prop('disabled', false); // update counters updatecounter(button, 1); updatecounter(otherbutton, -1); } }, error: function(xhr, error) { button.prop('disabled', false); } }); } function updatecounter(btn, value) { var counter = btn.next('.counter'); var newcount = math.max(0, parseint(counter.text()) + value); counter.text(newcount); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- icon html --> <button class="fa fa-thumbs-up" onclick="like(this, 10, 1)">like</button> <!-- counter --> <span class="counter">0</span> <button class="fa fa-thumbs-down" onclick="like(this, 10, 0)">dislike</button> <!-- counter --> <span class="counter">0</span>
Comments
Post a Comment