title: Trouble updating a <div> after successful validation using jQuery Validation plug-in
body: <p>I am validating a form using the <a href="http://jqueryvalidation.org/" rel="nofollow">jQuery Validation plug-in</a>, and I'm having some trouble updating a <code>&lt;div&gt;</code> with the status once the form is submitted (called using <code>submitHandler</code>). Once the user clicks to submit the form, it should update the <code>#inviteStatus</code> element with a status ("Adding user"). Then, once the response is received from the server (1-2 seconds) it should update <code>#inviteStatus</code> again with a result ("Success" or "Fail"). However, my script is jumping directly to the latter update ("Success" or "Fail"), and skipping the first "Adding user" update.</p>
  
  <p><a href="http://jsfiddle.net/bhall7x/Mf7sq/4/" rel="nofollow">http://jsfiddle.net/bhall7x/Mf7sq/4/</a></p>
  
  <p>I tried inserting a <code>delay(5000);</code> after the first <code>&lt;div&gt;</code> update, but the script seems to just stop at that point, and never continues on to the second result update message.</p>
  
  <p>Any ideas why this is happening? Thanks!</p>
  
  <p><strong>UPDATE:</strong> I've created an <a href="http://jsfiddle.net/bhall7x/Lh942/1/" rel="nofollow">updated Fiddle</a> that has the actual code that I'm using. I can't get the <code>.ajax()</code> query to actually work on JS Fiddle, but this way you can see what I'm trying to accomplish. Basically, I'd like to first update <code>#inviteStatus</code>, show it, then 
  update it with the results of my <code>.ajax()</code> query. Here's the code I'm using in the <code>submitHandler</code> of the jQuery Validation plug-in after the form is successfully validated:</p>
  
  <pre><code>// form successfully validated, provide user notification
  $("#inviteStatus").html("&lt;div class=\"alert alert-info\"&gt;Adding user&lt;/div&gt;");
  $("#inviteStatus").show(500);
  
  // get form values
  var postData = $(form).serializeArray();
  
  // submit form
  $.ajax({
      type        : "POST",
      data        : postData,
      async       : false,
      cache       : false,
      url         : "inviteScript.php",
      success: function(result) {
          // Provide the results of the ajax call
          $("#friendInviteStatus").html(result);
          $("#friendInviteStatus").show(500).delay(5000).hide(500);
      }
  });
  </code></pre>