Disabling a button based on an id clicked

Question

I need a person who can help me solve this problem.The code below is working well with the post and the php code.

 //Getting the id of a buyer and loop through
    //sending a request to the seller
    $(document).ready(function(){

    $('.buyerRequest').click(function(){


    var id=$(this).attr('id').replace('id_','');

    $.post('SendingOffer.php',{id:id},function(data){
        if(data=="true"){
            $(this).html('<b>Offer Send</b>').css('background','#dce6f1');
            $(this).attr("disabled","disabled");

        }else if(data=="false"){
            alert('You have reached the maximum number you can send todays');
            }
        });

    });
    });

I have tested the php code,that is,if data returned is true output alert box and is working.For instance

if(data=="true"){
        alert(id);

}

However,on including this code

if(data=="true"){
        $(this).html('<b>Offer Send</b>').css('background','#dce6f1');
        $(this).attr("disabled","disabled");

}

and clicking the current id,i am unable to disable it and change it's attributes to offer send.

How can i deal with this problem

This is my div code

echo"<li id='td_request'><a id='id_".$fetch_num['order_id']."' class='buyerRequest' href='#".$fetch_num['order_id']."'>Send Offer</a></li>";

on disabling... http://stackoverflow.com/a/1414366/623952 – gloomy.penguin Oct 20 '14 at 03:20 — gloomy.penguin, Oct 20 '14 at 03:20

Veeru · Answer 1 · 2014-10-20T03:52:44.863

$(this) might not be a very good idea to use inside a $.post. You better use a reference to the html object.

for example $("#mydiv").html('Offer Send').css('background','#dce6f1');

$(this) usually refers to the current object in the context, in this case the ajax request if i am not mistaken. For example...

$(".mydiv").each(function(){
//using $(this) here refers to the current instance of .mydiv; not the DOM or the body
});

So, try this

$(document).ready(function(){

$('.buyerRequest').click(function(){


var id=$(this).attr('id').replace('id_','');

$.post('SendingOffer.php',{id:id},function(data){
    if(data=="true"){
        $("#**yourdivid**").html('<b>Offer Send</b>').css('background','#dce6f1');
        $("#**yourdivid**").attr("disabled","disabled");

    }else if(data=="false"){
        alert('You have reached the maximum number you can send todays');
        }
    });

});
});

Working Code

<a id='id_0' class='buyerRequest' href='#0'>Send Offer</a>
<div id='responseDIV'></div>

<script>
$(document).ready(function(){
    $('.buyerRequest').click(function(){
        var id=$(this).attr('id').replace('id_','');
        $.post('SendingOffer.php',{id:id},function(data){
            if(data=="true"){
                $("#responseDIV").html('<b>Offer Send</b>').css('background','#dce6f1');
                $("#id_0").removeAttr("href");

            }else if(data=="false"){
                alert('You have reached the maximum number you can send todays');
                }
            });

        });
});
</script>

did you replace #yourdivid with your own div's id? did you give your div an ID in the first place? — Veeru, Oct 20 '14 at 03:33

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Maybe "this" is ambiguous here, try to change into:

var currentBtn = $(this);
var id = currentBtn.attr('id').replace('id_','');

$.post('SendingOffer.php',{id:id},function(data){
   if(data=="true"){
       currentBtn.html('<b>Offer Send</b>').css('background','#dce6f1');
       currentBtn.attr("disabled","disabled");

   }else if(data=="false"){
       alert('You have reached the maximum number you can send todays');
   }
});

if disabled attribute does not work, you can try:

currentBtn.prop("disabled", true);

It belongs to your jQuery's version , reference: jQuery .attr("disabled", "disabled") not working in Chrome

Hope this help :)

edited May 23 '17 at 12:20

Community

1
1

answered Oct 20 '14 at 03:23

Nam Nguyen

2,438
21
18

Thanks sir the send offer has worked however the attribute disabled is not working – daniel nyamasyo Oct 20 '14 at 03:30
You would try: currentBtn.prop("disabled",true); – Nam Nguyen Oct 20 '14 at 03:55

score 0 · Answer 3 · answered Oct 20 '14 at 03:33

There were a few problems. I assume this is a button. I created a div to apply the styling to. The problem is that this is defined by scope. Inside of the post callback, this refers to the actual post object, not an html element.

<script>

$(document).ready(function() {

   $('.buyerRequest').click(function() {  

      var id=$(this).attr('id').replace('id_',''); 

      $.post('SendingOffer.php', {"id":id}, function(data) {
         console.log(data);
         if (data.length>0) {
            $('#my_div').html('<b>Offer Send</b>').css('background','#dce6f1');
            $('#id_my_button').prop("disabled",true);
         }
         else {
            alert('You have reached the maximum number you can send todays');
         }
      }); 
   });
});

</script>

<input type='button' class='buyerRequest' id='id_my_button' value='my_button'> 
<br/>
<div id='my_div'></div>

Disabling a button based on an id clicked

3 Answers3