jQuery / Ajax - $.ajax() Passing Parameters to Callback - Good Pattern to Use?
JavascriptJqueryAjaxCallbackJavascript Problem Overview
JavaScript code I'm starting with:
function doSomething(url) {
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: rssToTarget
});
}
Pattern I would like to use:
//where elem is the target that should receive new items via DOM (appendChild)
function doSomething(url, elem) {
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: rssToTarget(elem)
});
}
I don't think I can get the callback to work this way, right? What is the proper pattern? I don't want to use global variables necessarily to temporarily hold the elem
or elem name.
Javascript Solutions
Solution 1 - Javascript
Like this...
function doSomething(url, elem) {
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: function(xml) {
rssToTarget(xml, elem);
}
});
}
Answer to your comment: Does use of anonymous functions affect performance?
Solution 2 - Javascript
The pattern you'd like to use could work if you create a closure inside your rssToTarget function:
function rssToTarget(element) {
return function (xmlData) {
// work with element and the data returned from the server
}
}
function doSomething(url, elem) {
$.ajax({ type: "GET",
url: url,
dataType: "xml",
success: rssToTarget(elem)
});
}
When rssToTarget(elem)
is executed, the element parameter is stored in the closure, and the callback function is returned, waiting to be executed.
Solution 3 - Javascript
What about exploting Ajax request settings context?
function doSomething(url, elem) {
$.ajax({
type: "GET",
url: url,
dataType: "xml",
success: rssToTarget,
elem: elem // <- add as settings argument
});
}
rssToTarget(ans) {
elem = this.elem; // <- get it back using "this"
}
By default callback context is a merge of $.ajaxSettings
and settings passed to $.ajax
. So if you add your fields in $.ajax
settings they go into callback context. That is, you can retrieve them from context using this
.