$.ajax context option

JqueryColdfusion

Jquery Problem Overview


Episode 11 of the yayQuery podcast mentions the $.ajax context option. How would I use this option in the success callback? What I'm currently doing is passing my input parameters back to the success callback so that I can animate the id that was called after success/error. If I use the context option, then perhaps I don't have to pass the parameters back from the called routine.

In this example, I pass STATEID back to the success field so that the state is removed from the DOM once it's been deleted from the database:

$('td.delete').click(function() {
  var confirm = window.confirm('Are you sure?');
  if (confirm) {
    var StateID = $(this).parents('tr').attr('id');
    $.ajax({
      url: 'Remote/State.cfc',
      data: {
        method: 'Delete',
        'StateID': StateID
      },
      success: function(result) {
        if (result.MSG == '') {
          $('#' + result.STATEID).remove();
        } else {
          $('#msg').text(result.MSG).addClass('err');;
        };
      }
    });
  }
});

Jquery Solutions


Solution 1 - Jquery

All the context does is it sets the value of this in the callbacks.

So if you're in an event handler, and you want this in the callbacks to be the element that received the event, you'd do:

context:this,
success:function() {
    // "this" is whatever the value was where this ajax call was made
}

If you wanted it to be some other type, just set that, and this will refer to that:

context:{some:'value'},
success:function() {
    // "this" the object you passed
    alert( this.some ); // "value"
}

In the code you added to the question, you could use StateID, but you wouldn't really need to since you already have access to that variable.

var StateID = $(this).parents('tr').attr('id');
$.ajax({
    url: 'Remote/State.cfc'
    ,data: {
        method:'Delete'
        ,'StateID':StateID
    }
    ,context: StateID
    ,success: function(result){

        alert(this);     // the value of StateID
        alert(StateID);  // same as above

        if (result.MSG == '') {
            $('#' + result.STATEID).remove();
        } else {
            $('#msg').text(result.MSG).addClass('err');;
        };
    }
});

Solution 2 - Jquery

If you set the context option, then this in success will be whatever you set as the value for context. So if you pass an object literal containing your input parameter names and values as the context, then in success you could use this.param1 to get the value of your first input parameter.

See the .ajax() docs for more.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPhillip SennView Question on Stackoverflow
Solution 1 - Jqueryuser113716View Answer on Stackoverflow
Solution 2 - JqueryjustktView Answer on Stackoverflow