jQuery: Referencing the calling object(this) when the bind/click event is for a class

Question

Thanks for reading this.

I am dynamically generating some data which includes a select drop-down with a text box next to it. If the user clicks the select, I am dynamically populating it (code below). I have a class on the select and I was hoping the following code would work. I tested it with an ID on the select and putting the ONE on the ID I got it to work. However, in changing the code to reference a class (since there will be multiple data groups that include a select with a text box next to it) and $(this), I could not get it to work. Any ideas would be helpful. Thanks

The relevance of the text box next to the select is the second part of the code...to update the text box when an option is selected in the select

.one is so the select is updated only once, then the .bind allows any options selected to be placed in the adjacent text box.

$('.classSelect').one("click",
 function() {
  $.ajax({
   type: "post",
   url: myURL ,
   dataType: "text",
   data: {
    '_service' : myService,
    '_program' : myProgram ,
    'param' : myParams
   },
   success:
    function(request) {
     $(this).html(request);   // populate select box
   }    // End success
  }); // End ajax method

  $(this).bind("click",
   function() {
    $(this).next().val($(this).val());
  }); // End BIND
 }); // End One

 <select id="mySelect" class="classSelect"></select>
 <input type="text">

Answer 1

That is matching one select. You need to match multiple elements so you want

$("select[class='classSelect']") ...

Answer 2

$(this) is only relevant within the scope of the function. outside of the function though, it loses that reference:

$('.classSelect').one("click", function() {
   $(this); // refers to $('.classSelect')

   $.ajax({
   // content
      $(this); // does not refer to $('.classSelect')
   });
});

a better way to handle this may be:

$('.classSelect').one("click", function() {
    var e = $(this);

    $.ajax({
    ...
        success : function(request) {
          e.html(request);
        }
    }); // end ajax

    $(this).bind('click', function() {
    // bind stuff

    }); // end bind

}); // end one

by the way, are you familiar with the load() method? i find it easier for basic ajax (as it acts on the wrapped set, instead of it being a standalone function like $.ajax(). here's how i would rewrite this using load():

$('.classSelect').one('click', function() {
    var options = {
       type : 'post',
       dataType : 'text',
       data : {
         '_service' : myService,
         '_program' : myProgram ,
         'param' : myParams
       }           
    } // end options

    // load() will automatically load your .classSelect with the results
    $(this).load(myUrl, options);


    $(this).click(function() {
    // etc...

    }); // end click

}); // end one

Answer 3

I believe that this is because the function attached to the success event doesn't know what 'this' is as it is run independently of the object you're calling it within. (I'm not explaining it very well, but I think it's to do with closures.)

I think if you added the following line before the $.ajax call:

var _this = this;

and then in the success function used that variable:

   success:
    function(request) {
     _this.html(request);   // populate select box
   }

it may well work

Answer 4

The success() function does not know about this, as any other event callback (they are run outside the object scope).

You need to close the variable in the scope of the success function, but what you really need is not "this", but $(this)

So:

var that = $(this);
... some code ...
success: function(request) {
  that.html(request)
}

Answer 5

Thanks Owen. Although there may be a better to write the code (with chaining)....my problem with this code was $(this) was not available in the .ajax and .bind calls..so storing it in a var and using that var was the solution.

Thanks again.

$('.classSelect').one("click",
 function() {
  var e = $(this) ;

  $.ajax({
   type: "post",
   url: myURL ,
   dataType: "text",
   data: {
    '_service' : myService,
    '_program' : myProgram ,
    'param' : myParams
   },
   success:
    function(request) {
     $(e).html(request);   // populate select box
   }    // End success
  }); // End ajax method

  $(e).one("click",
   function() {
    $(e).next().val($(e).val());
  }); // End BIND
 }); // End One