Run a function after an asynch AJAX call has been made, passing through variables
<p>I'm having issues with some code I'm working on. I have a generic function (<code>ajaxContent</code>) that is used from several points. What I need for this is a to run a function after the AJAX call has been made, but I need to pass though some data that I have before I made the call (so not data that comes back from the AJAX call.</p>

<pre><code>function ajaxContent(url, id, target, data, callbackFunction) {

  $.ajax({
    async : true,
    ....    
    complete: function(){
      if(typeof callbackFunction == "function"){
        callbackFunction(); // function get's executed here, lead_id is not available
      }
    }
  });
}    

$(document).on("click", "#something", function(){
  var leaf_id = $(this).attr('rel');

  ajaxContent(url, id, target, data, function(leaf_id){

    url = "/path/" + leaf_id;
    window.location = url;

  })
})

$(document).on("click", "#action", function() {

    ajaxContent(url, id, target, data, function(){

        if ($(this).attr('rel') == "M_0") // $(this).attr('rel') not available here, so need to pass through some way
            $('#treedata').css('background', 'url(/img/rotonde.png) 50% 50% no-repeat');
  });

});    
</code></pre>

<p>I could perhaps use somehing like </p>

<pre><code>function ajaxContent(url, id, target, data, callbackFunction, varA, varB, varC, varD) { 
   callbackFunction(varA, varB, varC, varD);
} 
</code></pre>

<p>with </p>

<pre><code>ajaxContent(url, id, target, data, function(varA){
}, varA, varB, varC, varD)` 
</code></pre>

<p>But not really scalable.</p>

<p>I hope this is clear :-)</p>
