Question

Before submitting a form button, I make a $.getJSON call that validates some of the data, and when it comes back, it either displays a “you didn’t fill out this form correctly” dialog or it does the form.submit(). But sometimes, especially on my slow test server, it takes a few seconds before the callback is called, and so I’d like to put up some visual indication (disabled buttons, wait cursors, etc) that you have pressed the button, and then turning off that visual indication in the callback. But I’m told that there is a small but non-zero chance that the callback might not be called.

What is the best practice to make sure that in that situation, I don’t end up with a non-functional form?

Answer 1

You can use $.ajax with an .error callback in addition to the .success callback instead of $.getJSON. If the request fails, the .error callback will fire. You can use that to re-enable and display a suitable message, similar to the one shown on StackOverflow when a vote fails. Example:

$.ajax({
  url: "test.html",
  dataType: "json",
  success: function(html){
     $form.submit();
  },
  error: function(xhr, error){
     console.debug(xhr); 
     console.debug(error);
     $form.find(":input").attr("disabled", false);
  }
});