$.ajax context option
Solution 1
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
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.
Phillip Senn
Developer in: Microsoft SQL Server, Adobe ColdFusion (and Lucee), HTML, CSS, JavaScript (with jQuery's help). Tools: Dreamweaver, Fireworks, Beyond Compare. Adjunct Instructor: Lenoir-Rhyne University. Twitter: @PhillipSenn
Updated on July 05, 2022Comments
-
Phillip Senn almost 2 years
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');; }; } }); } });
-
Phillip Senn about 13 yearsOh, ok. Thanks! I'm still figuring out variable scope I suppose.
-
user113716 about 13 years@cf_PhillipSenn: You're welcome. Yeah, it can be tricky. Probably the most common use of
context:
is the first solution where you want to retain the same value ofthis
inside the callbacks as it was outside. -
Saad Rehman Shah over 11 years@user113716 So I have the option of putting one of these two in my ajax call:
context:{parent_group:parent_group, container: container}
context:this
And then I am doingconsole.log(this.parent_group)
, shouldn't both of these work? Only the first one is working now. -
Ben over 5 yearsJust in case anyone encounters this issue like I did. If you assign an arrow function (
() => {}
) to thesuccess
option, thecontext
won't work (without error). You need to use thefunction
keyword.