jQuery / Ajax - $.ajax() Passing Parameters to Callback - Good Pattern to Use?

user_36590 0
Viewed 64248

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.

callback jquery ajax javascript
3 Answers
Josh_Stodola_544200

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.

CMS_54450

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.

user_2145170
Related