title: error callback function is fired even if request is successful
body: <p>I have a script that uses ajax to send mail. I have tested it by checking the email that will receive the mail and true enough, the ajax request is successful. I also checked the console window of my Firefox browser and it also shows me a successful message. But my problem here is that instead of the <code>done</code> callback function, the <code>error</code> callback function is fired. You may all wonder why I'm still using the <code>error</code> function instead of <code>fail</code>. The reason for this is because when I tried using the <code>fail</code> function, it doesn't trigger the alertbox that I have set inside it. So what I did is go back and use <code>error</code> function again since at least it triggers the alertbox I made.</p>
  
  <p>Here is the script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var submitButton = $('#submit');              // Variable to cache button element
      var alertBox1 = $('.success');                 // Variable to cache meter element
      var alertBox2 = $('.alert');
      var closeButton1 = $('.close1');                  // Variable to cache close button element
      var closeButton2 = $('.close2');                  // Variable to cache close button element
  
      $( function(){
          $( '#contactform' ).submit( function(e){
              e.preventDefault();
              console.log( 'hello' );
              var formData = $( this ).serialize();
              console.log( formData );
  
              $.ajax({
                   type: 'POST',
                   url: 'send.php',
                   data: formData,
                   dataType: 'json',
                   done: function(){
  
                          $(submitButton).fadeOut(500); // Fades out submit button when it's clicked
                          setTimeout(function() { // Delays the next effect
                               $(alertBox1).fadeIn(500); // Fades in success alert
                          }, 500);
                   },
                   error: function(){
                      $(submitButton).fadeOut(500); // Fades out submit button when it's clicked
                          setTimeout(function() { // Delays the next effect
                               $(alertBox2).fadeIn(500); // Fades in fail alert
                          }, 500);
                   }
              });
          });
  
          $(closeButton1).click(function() { // Initiates the reset function
              $(alertBox1).fadeOut(500); // Fades out success message
              setTimeout(function() { // Delays the next effect
                  $('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
                  $(submitButton).fadeIn(500); // Fades back in the submit button
              }, 500);
  
                  return false; // This stops the success alert from being removed as we just want to hide it
          });
  
          $(closeButton2).click(function() { // Initiates the reset function
              $(alertBox2).fadeOut(500); // Fades out success message
              setTimeout(function() { // Delays the next effect
                  $('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
                  $(submitButton).fadeIn(500); // Fades back in the submit button
              }, 500);
  
                  return false; // This stops the fail alert from being removed as we just want to hide it
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>What seems to be the one causing this? Just to reiterate, I've tried using <code>fail</code> instead of <code>error</code> callback function since that is one of the answers I found in the Internet and also because I know for a fact that the <code>error</code> function is already deprecated. But because of the reason I mentioned above, I've no choice but to use it.</p>