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

JavascriptJqueryAjaxCallback

Javascript 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.

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
QuestionBuddyJoeView Question on Stackoverflow
Solution 1 - JavascriptJosh StodolaView Answer on Stackoverflow
Solution 2 - JavascriptChristian C. SalvadóView Answer on Stackoverflow
Solution 3 - JavascriptTechNyquistView Answer on Stackoverflow