title: How best to handle errors during jquery ajax calls caused by user clicking on links
body: <p>I am gradually enhancing the ajax-tivity (TM) of my site and have recently added in some pretty basic error handling.
  My calls are being made via the jquery .ajax() method and I display errors to the user with a show_error_box(message) function
  I am handling all of my ajax by returning scripts so server-side validation was easy - I just send back a call to show_error_box. For other errors I have simply put the following code in my .ajax call</p>
  
  <pre><code>error: function(xhr, status, error) {
      show_error_box("There has been an error communicating with the server&lt;br/&gt;The field has not been updated&lt;br/&gt;Please check your internet connection");
  }
  </code></pre>
  
  <p>I've found that this deals nicely with most issues (no connection, timeout, etc) but it deals poorly with the situation when a user clicks on a link while an ajax call is still in progress. The error box begins to display and then suddenly the user is whisked away to the new page.</p>
  
  <p>What is the better way of handling this situation? I would ideally like a non-intrusive error message displayed (e.g. 'please wait until the update is finished') and the click on the link ignored. Any suggestions as to how to best achieve this?</p>
  
  <p>EDIT:</p>
  
  <p>I solved this by temporarily disabling all links then reenabling them like so;</p>
  
  <pre><code>$.ajaxSetup({  
      beforeSend: function() {disable_links()},
      complete: function() {enable_links()},
      timeout: 15000
  });
  
  function disable_links() {
      $('a').each(function() {
          if ($(this).attr('href')) {
            $(this).data('href', $(this).attr('href')).removeAttr('href');
        }
      })
  }
  
  function enable_links() {
      $('a').each(function() {
          $(this).attr('href', $(this).data('href'));
      })
  }
  </code></pre>