title: Jquery plugin blockUI not working with ajax
body: <p>I want to block the current page when a specific ajax call is made and use a blockUI as a message box. I can't just use <code>$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);</code></p>
  
  <p>My code is the following..</p>
  
  <pre><code>bc.find('.submit').click(function (e) {
      e.preventDefault();
      if ($(this).hasClass('lock'))
          return;
      $.blockUI();
      $(this).addClass('lock');
      bc.submit();
  });
  
  var validator;
  validator = bc.validate({
      ignore: '',
      rules: {
          UserName: {
              required: true
          }
      },
      messages: {
          UserName: 'must have',
      },
      submitHandler: function (form) {
          $.ajax({
              url: '/yyyy/xxxx',
              type: 'POST',
              data: postdata,
              complete: function () {
                  bc.find('.submit').removeClass('lock');
              },
              success: function (data) {
                  if (data.status == 'OK') {
                      $.blockUI({ message: 'OK' });
                      ......
                  }
                  else {
                      switch (data.status) {
                          case 'xxx':
                          ......
                      }
                      $.unblockUI();
                  }
              },
              error: function () {
                  $.unblockUI();
                  alert('xxx');
              }
          });
      }
  });
  </code></pre>
  
  <p>The scenario is that when I click the <code>.submit</code> button, the page is blocked and a ajax call is made to the server to get a data response. When the ajax call is successful, I unblock the current page and if data.status is 'OK', I show a message box (also based on blockUI plugin). Else I show an error on the current page, and then unblock it.</p>
  
  <p><strong>Edit at 2016, there is a edit which change the question meaning(maybe due to my very poor English at that moment), I have rolled change back here, and make it more clear, please do not change below again.</strong></p>
  
  <p>But in fact, <strong><em>only after ajax call is completed</em></strong> (debug step over the code in <code>ajax complete handler</code>), then see: </p>
  
  <ol>
  <li>first <code>$.blockUI();</code> excuted</li>
  <li>execute <code>$.blockUI({ message: 'OK' })</code> or not</li>
  <li>then <code>$.unblockUI()</code> be called</li>
  </ol>
  
  <p>(Above is what I mean abnormal execution sequence of chrome or firefox debug tool in the answer.because <code>blockui code</code> should not be executed after ajax complete)</p>
  
  <p>It's not what I want, and I can't figure this out.</p>