Geek Answers Handbook

JQuery: reference to the calling object (this) when the binding / click event for the class

Thanks for reading this.

I am dynamically generating some data that includes a select dropdown with a text box next to it. If the user presses the select button, I dynamically populate it (code below). I have a class to choose from and I was hoping the following code would work. I checked it with the identifier on the selected one and put the ONE in the ID that I got for it to work. However, when changing the code to reference the class (since there will be several data groups next to it, which include the selection with the text field 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 selection is the second part of the code ... to update the text field when in the selection

option selected.

.one is a selection that is updated only once, and then .bind allows you to select any options 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">
+4
source share
5 answers

$(this) refers only to the scope of the function. outside the function, however, it loses this link:

 $('.classSelect').one("click", function() { $(this); // refers to $('.classSelect') $.ajax({ // content $(this); // does not refer to $('.classSelect') }); });

the best way to handle this might 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 (since it acts on a wrapped set, instead of being a standalone function like $.ajax() , for example). Here I would rewrite this with 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
+11
source

I believe that this is due to the fact that the function attached to the success event does not know what 'this' is, since it is launched regardless of the object in which you call it. (I do not explain this very well, but I think this is due to the closure.)

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

 var _this = this;

and then this variable is used in the success function:

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

he can work

+1
source

This corresponds to a single select. You need to match multiple elements for you to want

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

The success () function does not know about it, like any other event callback (they are fired outside the scope of the object).

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

So:

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

Thanks Owen. Although it might be better to write code (with a chain) .... my problem with this code was $ (this) was not available in calls to .ajax and .bind..so storing it in var and using this 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
0
source

More articles:


All Articles