Using jQuery, how can I store the result of a call to the $.ajax function, to be re-used?

Question

Thanks for reading this.

I imagine this is really a javascript question, and my title probably does not get at the heart of what I am trying to do, but I want to store the result of my ajax request in a global variable. This would allow me to test the var before making the ajax call...and avoid repeated ajax calls for the same data. I need to be able to pass the variable name from the click event down through the populateSelect function into the ajaxCall function.

It seems like I could pass a function as a parameter, but I have not been able to make that work.

I like to include working examples in my questions, but in this case the latency in the call to the server is part of the problem.

Thanks

$('#getSelectOptions').bind("click", function() {
 populateSelect(this);
});

function populateSelect(whatWasClicked) {
 var thisSelect = $(whatWasClicked).parents("div").find("select") ;

 var before = function() { $(loading).show() ;  } ;
 var complete = function() { $(loading).hide() ;  } ;
 var data = {'_service' : 'myService', '_program' : 'myProgram' } ;
 var error = function(){alert("Error"); } ;
 var success = function(request) { $(thisSelect).html(request) ; };
 var waitTime = 20000 ;

 ajaxCall(thisSelect, waitTime, before, complete, data, success, error ) ;
}

function ajaxCall(elementToPopulate, waitTime, whatToDoBeforeAjaxSend,
                  whatToDoAfterAjaxSend, dataToSendToTheServer, 
                  whatToDoAfterSuccess, whatToDoAfterError) {
 $.ajax({ 
  type: "post", 
  url: "http://myURL/cgi-bin/broker", 
  dataType: "text", 
  data: dataToSendToTheServer, 
  timeout: waitTime, 
  beforeSend: whatToDoBeforeAjaxSend, 
  error: whatToDoAfterError(request),
  success: whatToDoAfterSuccess(request)
 });
}

EDIT Further education in how to write a good question... I should have mentioned that I call populateSelect to populate multiple selects..so I need way to reference the results for each select

Answer 1

JavaScript's scoping is such that if you just declared a global variable, you should be able to access it from within the ajax success function and the click function as well.

var _global_holder = null;
$('#getSelectOptions').bind("click", function() {
 if(_global_holder==null) { whatever }
 populateSelect(this);
});

function populateSelect(whatWasClicked) {
 if(_global_holder !== null) {
    whatever
  } else { whatever else }

 ajaxCall(thisSelect, waitTime, before, complete, data, success, error ) ;
}

function ajaxCall(elementToPopulate, waitTime, whatToDoBeforeAjaxSend,
                  whatToDoAfterAjaxSend, dataToSendToTheServer, 
                  whatToDoAfterSuccess, whatToDoAfterError) {
...
}

Answer 2

It looks like in the example you gave, you only have one type of AJAX request, POSTed to the same URL with the same data every time. If that's the case, you should just need something like :

var brokerResponse = null;  // <-- Global variable

function populateSelect(whatWasClicked) {
 var thisSelect = $(whatWasClicked).parents("div").find("select") ;

 if (!brokerResponse) {  // <-- Does an old response exist? If not, get one...
   var before = function() { $(loading).show() ;  } ;
   var complete = function() { $(loading).hide() ;  } ;
   var data = {'_service' : 'myService', '_program' : 'myProgram' } ;
   var error = function(){alert("Error"); } ;

   var success = function(request) {  // <-- Store the response before use
      brokerResponse = request; 
      $(thisSelect).html(brokerResponse);
   };
   var waitTime = 20000 ;

   ajaxCall(thisSelect, waitTime, before, complete, data, success, error ) ;
 }
 else {   // <-- If it already existed, we get here.
   $(thisSelect).html(brokerResponse);  // <-- Use the old response
 }
}

If you have multiple possible items for whatWasClicked which each need a different AJAX response cached, then you need to have some string with which to identify whatWasClicked, and use that to store multiple values in your global variable. For example, if you have a unique id on whatWasClicked, this would work:

var brokerResponse = {}; // Global variable is a simple object

function populateSelect(whatWasClicked) {

 var whatWasClickedId = $(whatWasClicked).attr('id'); // Get the unique ID
 var thisSelect = $(whatWasClicked).parents("div").find("select") ;

 if (!brokerResponse[whatWasClickedId]) {  // Check that ID for a response
   var before = function() { $(loading).show() ;  } ;
   var complete = function() { $(loading).hide() ;  } ;
   var data = {'_service' : 'myService', '_program' : 'myProgram' } ;
   var error = function(){alert("Error"); } ;
   var success = function(request) {

      brokerResponse[whatWasClickedId] = request; // Using ID
      $(thisSelect).html(brokerResponse);
   };
   var waitTime = 20000 ;

   ajaxCall(thisSelect, waitTime, before, complete, data, success, error ) ;
 }
 else {
   $(thisSelect).html(brokerResponse[whatWasClickedId]); // Etc...
 }
}

Answer 3

jQuery has a $.data method which you can use to store/retrieve items related to any element on the page.

//e.g. create some object
var inst = {};
inst.name = 'My Name'

var target = $('#textbox1');

//save the data
$.data(target, 'PROP_NAME', inst);

//retrieve the instance
var inst =  $.data(target, 'PROP_NAME');