Save temporary Ajax parameters in jQuery

Question

Hi there,

I am developing a heavily scripted Web application and am now doing some Error handling. But to do that, I need a way to access the AJAX parameters that were given to jQuery for that specific AJAX Request. I haven't found anything on it at jquery.com so I am asking you folks if you have any idea how to accomplish that.

Here is an example of how I want to do that codewise:

function add_recording(filename) {
    updateCounter('addRecording','up');
    jQuery.ajax({
     url: '/cgi-bin/apps/ajax/Storyboard',
     type: 'POST',
     dataType: 'json',
     data: {
      sid: sid,
      story: story,
      screen_id: screen_id,
      mode: 'add_record',
      file_name: filename
     },
     success: function(json) {
      updateCounter('addRecording','down');
      id = json[0].id;
      create_record(id, 1, 1, json);
     },
     error: function() {
      updateCounter('addRecording','error',hereBeData);
     }
    })
}

hereBeData would be the needed data (like the url, type, dataType and the actual data).

updateCounter is a function which updates the Status Area with new info. It's also the area where the User is notified of an Error and where a Dismiss and Retry Button would be generated, based on the Info that was gathered in hereBeData.

Answer 1

You can use the ajax complete event which passes you the ajaxOptions that were used for the request. The complete fires for both a successful and failed request.

complete : function (event, XMLHttpRequest, ajaxOptions) {
   //store ajaxOptions here
   //1 way is to use the .data on the body for example
   $('body').data('myLastAjaxRequest', ajaxOptions);
}

You can then retireve the options using

var ajaxOptions = $('body').data('myLastAjaxRequest');

Answer 2

Check out what parameters you can get in the callback for error.

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

Answer 3

Regardless of calling complete() success() or error() - this will equal the object passed to $.ajax() although the values for URL and data will not always be exactly the same - it will convert paramerters and edit the object around a bit. You can add a custom key to the object to remember your stuff though:

$.ajax({
  url: '/',
  data: {test:'test'},
  // we make a little 'extra copy' here in case we need it later in an event
  remember: {url:'/', data:{test:'test'}},

  error: function() {
    alert(this.remember.data.test + ': error');
  },
  success: function() {
    alert(this.remember.data.test + ': success');
  },
  complete: function() {
    alert(this.remember.data.url + ': complete');
  }
});

Of course - since you are setting this data originally from some source - you could rely on the variable scoping to keep it around for you:

$("someelement").click(function() {
   var theURL = $(this).attr('href');
   var theData = { text: $(this).text(); }
   $.ajax({ 
     url: theUrl,
     data: theData,
     error: function() {
       alert('There was an error loading '+theURL);
     } 
   });

   // but look out for situations like this: 
   theURL = 'something else';
});