CODEWITHSUNDEEP
javascriptjquery
SAULMARQ
SAULMARQ

Reputation: 57

$(this) inside a function?

I apologize in advance if the title doesn't really describe my problem. I'm still new to javascript/jquery, and this is how I understand the problem...

I'm using a button to call up a function that appends an element to my webpage.

<button id="bartspbyu" class="btn btn-xs btn-success add-alert" onClick="this.disabled = 'disabled';">Add</button>

As you can see, when it's clicked, it disables itself. It also uses a script to change the text from "Add" to "Added":

$('.add-alert').on('click', function() { 
  $('#added-alert').fadeIn('slow');
  setTimeout(function() {
    $('#added-alert').fadeOut('slow');
  }, 2000);
  $(this).text('Added');
});

The user has the option to then delete the element they added. When they delete the element, the button becomes enabled again, using the following script:

//Reactive Add Button
   $(document).on("click", ".drartspbyu", function (){
   $("#bartspbyu").removeAttr("disabled");
});

This works just fine, however I'm trying to get it to change the text in the button back to "Add". I did the following:

//Reactive Add Button
$(document).on("click", ".drartspbyu", function (){
    $("#bartspbyu").removeAttr("disabled", function (){
      $(this).text('Add');
    });
});

It's enabling the button again, but it's not editing the text. I'm not sure if I've set up $(this) incorrectly or if the entire thing is wrong.

I realize that I could do something like $("#bartspbyu").text('Add');, but the reason I'm using $(this) is because there are hundreds of these add buttons and I don't want to have to spend hours editing each individual ID (#bartspbyu is just one of over 400). If I can find a way to get it to read #bartspbyu from the first instance that it's mentioned, that would save me hours of work since I would only have to do a Find + Replace and add this extra line of code to everything.

Thanks in advance for the help! Again, I'm still new at this, so I realize I'm probably missing something super obvious.

Upvotes: 1

Views: 84

Answers (3)

somethinghere
somethinghere

Reputation: 17358

removeAttr() does not have a callback function (http://api.jquery.com/removeAttr/). You should just append to the text() since you want to apply it to the same element.

$("#bartspbyu").removeAttr("disabled").text("Add");

jQuery allows you to 'method-chain' functions. the $("") constructor constructs an object to which you can consequently apply multiple things, like removing an attribute and then changing the text. It works as if you typed:

 $("#bartspbyu").removeAttr("disabled")
 $("#bartspbyu").text("Add")

The advantage being that you don't actually need to repeat yourself. Also, because removeAttr() does not have a callback function (it only takes the name of the attribute as a parameter), it will not execute the anonymous function you passed it as it is not intended to do so.

Upvotes: 4

e-e
e-e

Reputation: 1261

I would also suggest getting rid of the inline javascript and just adding the disabling code to that first block of jquery you have.

Upvotes: 1

Travis J
Travis J

Reputation: 82357

I don't think that the second argument of removeAttr is a callback. Instead, just take advantage of chaining

$("#bartspbyu").removeAttr("disabled").text('Add');

Upvotes: 3

Related Questions