title: Changes to DOM should be visible before Ajax calls are executed
body: <p>I am working on some improvements for a shopping cart (Gambio GX2 shop software). When the customer updates the quantity of the products, he should see a loading gif while the cart is updated. This is done by applying the class <code>.modal</code> (see CSS) to the body (using JQuery's <code>.addClass</code>). After that, some ajax calls are executed and in the end the cart is submitted and the page is reloaded.</p>
  
  <p>This works perfectly in Firefox, but it has issues in other Browsers. In Chrome, all the Ajax calls are executed first, and only then the gif loading animation is visible (while the page reloads). In Safari, the gif animation doesn't shop up at all.</p>
  
  <p>If I set a break point in the debugger, then I can see the gif animation immediately (step by step execution), but as soon as I let it run its normal course, it seems that the order is not correct.</p>
  
  <p><strong>So in short: How can I make sure that the visual changes are applied before the ajax calls are exectuted?</strong></p>
  
  <p>I have the following function (simplified for example's sake)</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.button_cart_refresh').live('click', function (event) {
  
      $("body").addClass("loading"); // Show "loading" gif
  
      var coo_quantity_checker = new GMOrderQuantityChecker();
      var t_result = coo_quantity_checker.check_cart(); // Trigger Ajax calls
  
      if (t_result == true) {
          $('#cart_quantity').trigger("submit", [true]);
      } else {
          $("body").removeClass("loading");
      }
      return false;
  });
  </code></pre>
  
  <p><strong>CSS</strong> (see <a href="https://stackoverflow.com/a/1964871/1131823">https://stackoverflow.com/a/1964871/1131823</a>)</p>
  
  <pre><code>.modal {
      display:    none;
      position:   fixed;
      z-index:    1000;
      top:        0;
      left:       0;
      height:     100%;
      width:      100%;
      background: rgba( 255, 255, 255, .4 )
      url('img/ajax-sheep-loader.gif')
      50% 50%
      no-repeat;
  }
  
  body.loading .modal {
      display: block;
  }
  </code></pre>