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

Question

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.

http://stackoverflow.com/questions/2602981/jquery-how-to-pass-additional-parameters-to-success-callback-for-ajax-call use invokedata — Roman Rhrn Nesterov, Mar 27 '12 at 06:10
For future reference: You need to store the callback function (`rssToTarget`) within the `success` property of the object literal you are passing to `$.ajax()`, so jQuery can call that function once the AJAX request is completed. By adding `(elem)` to the end of the function name, you are mistakenly invoking `rssToTarget` and storing its return value within `success`. In JS, adding parentheses at the end of a function name will invoke it. — BrunoF, Feb 24 '17 at 18:00

score 97 · Accepted Answer · edited May 23 '17 at 12:26

97

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?

edited May 23 '17 at 12:26

Community

1
1

answered Jul 28 '09 at 13:30

Josh Stodola

81,538
47
180
227

3

aha +1. Do you pay any performance price for creating anon functions everywhere? – BuddyJoe Jul 28 '09 at 13:42
2

And I guess it would really be.... success: function(xml) { rssToTarget(xml, elem); } – BuddyJoe Jul 28 '09 at 13:43
if you wrap your `$.ajax` call in a loop, this approach will create new function (`function(xml) { ... }`) for every loop, consuming more memory. – stack247 Aug 19 '15 at 21:57

Christian C. Salvadó · Answer 2 · 2009-07-28T14:04:59.187

30

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.

edited Jul 28 '09 at 14:04

answered Jul 28 '09 at 13:44

Christian C. Salvadó

807,428
183
922
838

-1 You cant set success to a function that returns a function. – Josh Stodola Jul 28 '09 at 14:11
I forgot to add " but requires a parameter" – Josh Stodola Jul 28 '09 at 14:12
3

of course you can return a function check the code running! http://jsbin.com/anepo/edit – Christian C. Salvadó Jul 28 '09 at 14:19
3

The returned anonymous function has an input parameter... JavaScript functional capabilities allows you to do that and more with functions... – Christian C. Salvadó Jul 28 '09 at 14:25
What about the normal success callback function parameter ? (data, textStatus, jqXHR) ? – Royi Namir Feb 17 '13 at 18:10
I mean , the success call back should get 3 params from the ajax response evemt. where are they in your answer? ( or maybe i didnt understand it ...) – Royi Namir Feb 17 '13 at 20:30
@RoyiNamir JavaScript functions are variadic, they can be called with more (or less!) parameters than their definitions call for. Rest assured that this example works as intended. – gcochard Jun 12 '13 at 18:56
1

This answer more faithfully reproduces what the OP wanted to achieve than the accepted answer does. – sage88 Apr 17 '14 at 06:02
@CMS Is this approach fundamentally the same as the accepted answer i.e. use closure for passing data to callback? – user Jul 01 '14 at 16:14
I like this approach, esp if I need to wrap `$.ajax` call in a loop, I don't have to create new function for every loop. Great approach! – stack247 Aug 19 '15 at 21:59

score 0 · Answer 3 · answered Jan 12 '22 at 11:47

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.

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

3 Answers3

Linked