How to traverse in jQuery within AJAX function?

Question

I am having difficulty traversing with jQuery. I have a form with a dynamic set of dropdown boxes, and am trying to call particular actions based on element class instead of id, as this form can be cloned in my application.

Any ideas why my traversing isn't working? Is my $(this) call becoming voided somehow?

HTML:

<div>
    <label>Item:</label>
    <select class="item" name="item" id="item"> 
        <option value="">Select</option>
        ...
    </select>
</div>          
<div>
    <label class="label>Options:</label>
    <select class="options" name="options" id="options">

        ...
    /select>
</div>

Javascript:

$(".item").change(function () { 

  var group_id = $(this).val();

   $.ajax({
        type: "POST", 
        url: "../../db/items.php?id=" + group_id, 
        dataType: "json",
        success: function(data){
            $(this).parent().next().children('select.options').empty(); 
            $(this).parent().next().children('select.options').append('<option value="">Select</option>');
            $.each(data, function(i, val){    
               $(this).parent().next().children('select.options').append('<option value="' + val.group_id + '">' + val.name + '</option>');
            });
            $(this).parent().next().children('select.options').focus();
        },
        beforeSend: function(){
            $(this).parent().next().children('select.options').empty();
            $(this).parent().next().children('select.options').append('<option value="">Loading...</option>');
        },
        error: function(){
            $(this).parent().next().children('select.options').attr('disabled', true);
            $(this).parent().next().children('select.options').empty();
            $(this).parent().next().children('select.options').append('<option value="">No Options</option>');
        }
    })  

});

Yes, inside the callbacks, `this` refers to something else. If you want a reference to the DOM element, you have to store it earlier. — Felix Kling, Jan 06 '12 at 22:40
possible duplicate of [$(this) inside of AJAX success not working](http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) — Felix Kling, Jan 06 '12 at 22:41

Andrew Whitaker · Accepted Answer · 2012-01-06T22:46:54.003

this is no longer the DOM element that the event was triggered on. You can set the value of this by using the context option of $.ajax:

$(".item").change(function () {
    $.ajax({
        /* options */
        context: this,
        success: function () {
            // this is now the element that was changed
        }
    });
});

You could also store the value of this in a variable and use it in your callback:

$(".item").change(function () { 

  var group_id = $(this).val();
  var self = this;

   $.ajax({
        type: "POST", 
        url: "../../db/items.php?id=" + group_id, 
        dataType: "json",
        success: function(data){
            // use "self" instead of "this"
        }
    })  

});

Another note: You should consider caching your selectors for greater performance (and readability). Also, you can chain together jQuery function calls:

var $children = $(this).parent().next().children('select.options')
    .empty()
    .append('<option value="">Select</option>');

$.each(data, function(i, val){    
   $children.append('<option value="' + val.group_id + '">' + val.name + '</option>');
});
$children.focus();

I didn't now that about the context attribute in the ajax call. That seems cleaner that defining another variable as I suggested as well. — Matt Moore, Jan 06 '12 at 22:44

score 1 · Answer 2 · answered Jan 06 '12 at 22:42

 var group_id = $(this).val();
 var myThis = $(this);

   $.ajax({
        type: "POST", 
        url: "../../db/items.php?id=" + group_id, 
        dataType: "json",
        success: function(data){
            myThis.parent().next().children('select.options').empty(); 
        ...

score 0 · Answer 3 · answered Jan 06 '12 at 22:41

0

Yup, $this now refers to the success function in your ajax call. Add this line.

$(".item").change(function () {  

  var group_id = $(this).val(); 
  var item = $(this); // Added line

Now in your ajax function use item where you use $this.

answered Jan 06 '12 at 22:41

Matt Moore

581
2
6

How to traverse in jQuery within AJAX function?

3 Answers3