How to update style after ajax call in jQuery?

Question

I have dynamicaly added input fields like this one:

<input id="person__1_badge_number" class="number" type="text" size="12" name="person[][1][badge][number]"/>

And when I add this field I call fallowing function:

function please_rebind() {
  $('.number').bind("change", function() {
    $.post('/registration/sell/check_badge_number', { number: $(this).val() },
    function(data) {
      $(this).addClass('make_it_red');
      alert(data);
    }, "html");
 });
}

And it didn't add 'make_it_red' class to my input field (I also tried html('foo') and other stuff and it also doesn't work). I think it is becouse I run $(this) inside other function, but I don't know what to do with it. $(this).val() works and I also get correct response (alert(data)). Can anybody help?

Jose Basilio · Accepted Answer · 2009-06-15 15:52:39Z

6

I think what is happening is that after the callback, the reference to $(this) is lost. Try it this way:

function please_rebind() {
  $('.number').bind("change", function() {
    var that = $(this);
    $.post('/registration/sell/check_badge_number', { number: $(this).val() },
    function(data) {
      that.addClass('make_it_red');          
    }, "html");
 });
}

answered Jun 15, 2009 at 15:52

Jose Basilio

51.7k13 gold badges124 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ayaz Over a year ago

Just wanted to add that "this" within the callback for $.post refers to the options for the given ajax request.

Javier Over a year ago

this is one of the recurring thorns in JS, the volatility of 'this'. just remember to use this trick whenever you define a callback. Of course, this makes the function a full closure, which is considered 'bad practice' performance-wise by IE developers. they prefer to keep JScript non-performant on these cases.

karim79 · Accepted Answer · 2009-06-15 15:52:43Z

You can reference the element by id:

$('#person__1_badge_number').addClass('make_it_red');

Also, it depends on how you've dynamically inserted the element, if you just appended it as a string to some div, for example, it may not be bound to the DOM.

EDIT: you can get the element ID from within the binding, and build the selector within the callback:

 function please_rebind() {
  $('.number').bind("change", function() {
    var elementId = this.id;
    $.post('/registration/sell/check_badge_number', { number: $(this).val() },
    function(data) {
      $('#' + elementId).addClass('make_it_red');
      alert(data);
    }, "html");
 });
}

Collectives™ on Stack Overflow

How to update style after ajax call in jQuery?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related