Disabling a button based on an id clicked - php

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>";

Answer 1

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>

Answer 2

$(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>

Answer 3

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 :)