title: Loading bar while submitting jquery ajax post, don't show up
body: <p>I'm using <a href="http://jqueryui.com/demos/dialog/#modal-form" rel="nofollow">jQuery UI dialog modal form</a>.</p>
  
  <p>All works great, but I send an ajax post, so I added this code:</p>
  
  <pre><code>$( "#dialog-form" ).dialog({
              autoOpen: false,
              height: 500,
              width: 550,
              modal: true,
              buttons: {
                  "Create an account": function() {
  
                      var bValid = true;
                      allFields.removeClass( "ui-state-error" );
                      // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                      if ( bValid ) {
                              $.ajax({ url: 'about.php',
                                   data: {name: name.val(), email: email.val()},
                               type: 'post',
                               async: false
                          });
                                      }
                                  }
                              }
                          });
  </code></pre>
  
  <p>The <code>$.ajax</code> part is what I added.
  I want to show a Loading bar while processing the post, I added this code:</p>
  
  <pre><code>$('#progress')
      .hide()  // hide it initially
      .ajaxStart(function() {
          $(this).show();
      })
      .ajaxStop(function() {
          $(this).hide();
      });
  </code></pre>
  
  <p>But it doesn't work, my post goes to a php script which one have 2 seconds waiting time.
  It just don't show the <code>#progress div</code>, so the <code>.hide</code> is working. </p>
  
  <p>Also, for example if I add <code>$( "#dialog-form" ).dialog({ hide: "slide" });</code> before the <code>$.ajax</code> it doesn't work, it hides once all button function is finished.</p>
  
  <p>Thanks.</p>