jQuery: Handling Internal Server Error Responses

Question

I have a form on a page that adds new data to a database via jQuery. It works fine, but sometimes the server craps out and I get a 500 (Internal Server Error), but that's because my server sucks.

The problem is that I sometimes get the server error after the PHP makes the addition to the database, but instead of getting a success message, I get the error, even though the addition has been made. So how should I go about this to make sure the PHP doesn't add the data if I get the error?

[And yes, I will eventually switch to a new server, but no server is perfect]

Here's the script:

$.ajax({
  type: "POST",
  url: "/clase/do-add",
  data: $("#add").serialize(),
  dataType: "json",
  timeout: 8000,
  beforeSend: function() {
    var icon = '<p class="loading-add"></p>'; // loading icon
    $('form#add').append(icon);
  },
  success: function(data) {
    if (data.error == true) { // php returns error = true if name is invalid
      alert('Invalid name.');
      $('form#add').find('p').remove();
    } else {
      // make the addition
    }
  },
  error: function () { 
    $('form#add').find('p').remove();
    alert('Error. Try again.');
  }
});

Answer 1

You could wrap you ajax call in a function and "reqest" the function again on error.

Something linke this:

jQuery.fn = function yourajaxfunction(){
    $.ajax({
      type: "POST",
      url: "/clase/do-add",
      data: $("#add").serialize(),
      dataType: "json",
      timeout: 8000,
      beforeSend: function() {
        var icon = '<p class="loading-add"></p>'; // loading icon
        $('form#add').append(icon);
      },
      success: function(data) {
        if (data.error == true) { // php returns error = true if name is invalid
          alert('Invalid name.');
          $('form#add').find('p').remove();
        } else {
          // make the addition
        }
      },
      error: function () { 
        $('form#add').find('p').remove();
        // ####### i added this:
        $(this).yourajaxfunction();
        alert('Error. Try again.');
      }
    });
}

Or you could have a idle function that checks again after some miliseconds before you do run the function again at the error:

$(this).idle().yourajaxfunction();

Idle function used above:

jQuery.fn.idle = function(time){
    var o = $(this);
    o.queue(function(){
       setTimeout(function(){
          o.dequeue();
       }, time);
    });
    return o;
};

But the best thing is to fix the server.. this stuff is just hacks and patches that compensate for another problem: the bad server. :)

So it's not a good idea for any production scenarios.