title: AJAX post not reliable, using '.then' doesn't work either
body: <p>I'm trying to create a hierarchical navigation bar, but I've come up against a few problems. </p>
  
  <p>I've used a series of AJAX post methods to post the div ID information to a PHP page which then runs a loop and retrieves all the categories in a database. </p>
  
  <p>This is done in four steps, first it call the top level category 1 and then top level category 2, then it runs two loops 3-9 and 10-50, these loops should retrieve up to 50 categories from the database and sort them.</p>
  
  <p>The post method doesn't always work, sometimes when the page loads it's fine other times it misses some of the <code>&lt;li&gt;</code>'s, I expect this is because some AJAX requires one to load before it can work, so I tried to use .then and callbacks to sequence the posts, this doesn't work.</p>
  
  <pre><code>$(document).ready(function() {
  
      var IDs = [];
      $("#menu").find("li").each(function() {
          IDs.push(this.id);
      });
      var arr = $.makeArray(IDs);
      var full_list = ""
      for (var i = 0; i &lt; arr.length; ++i) {
          full_list = full_list + arr[i] + ' '
  
      }
      //INDEPENDANT CALL
      function A() {
              $.ajax({
                  url: 'DisplayCategories/SubCat.php',
                  type: 'post',
                  data: {
                      'Parent': full_list
                  },
                  success: function(data) {
                      var Element = data.slice(0, 2);
                      NewData = data.substr(2);
                      $(Element).after(NewData);
  
  
                  }
              }).error(function() {
                  alert('error');
              }).complete(function(data) {
                  var Element = data.slice(0, 2);
                  NewData = data.substr(2);
                  $(Element).after(NewData);
  
  
              });
          }
          //INDEPENDANT CALL
  
      function B() {
          $.ajax({
              url: 'DisplayCategories/SubCatCrafts.php',
              type: 'post',
              data: {
                  'Parent': full_list
              },
              success: function(data) {
                  var Element = data.slice(0, 2);
                  NewData = data.substr(2);
                  $(Element).after(NewData);
  
  
              }
          }).error(function() {
              alert('errosr');
          }).complete(function(data) {
              var Element = data.slice(0, 2);
              NewData = data.substr(2);
              $(Element).after(NewData);
  
  
          });
      }
  
      function C() {
          for (i = 3; i &lt; 10; i++) {
              $.ajax({
                  url: 'DisplayCategories/SubCatLevelThree.php',
                  type: 'post',
                  data: {
                      'Parent': i
                  },
                  success: function(data) {
                      var Element = data.slice(0, 2);
                      NewData = data.substr(2);
                      $(Element).after(NewData);
  
  
                  }
              }).error(function() {
                  alert('error');
              }).complete(function(data) {
                  var Element = data.slice(0, 2);
                  NewData = data.substr(2);
                  $(Element).after(NewData);
  
  
              });
  
  
          }
      }
  
      function D() {
          for (s = 11; s &lt; 50; s++) {
              $.ajax({
                  url: 'DisplayCategories/SubCatLevelEleven.php',
                  type: 'post',
                  data: {
                      'Parent': s
                  },
                  success: function(data) {
                      var Element = data.slice(0, 3);
                      NewData = data.substr(3);
                      $(Element).after(NewData);
  
  
                  }
              }).error(function() {
                  alert('error');
              }).complete(function(data) {
                  var Element = data.slice(0, 3);
                  NewData = data.substr(3);
                  $(Element).after(NewData);
  
  
  
              });
  
          }
      }
      B();
      A();
      C();
      D();
  
  });
  </code></pre>
  
  <p>You can see it live <a href="http://www.web-designs-uk.co.uk/DisplayCategories/index.php" rel="nofollow"><strong>Here</strong></a></p>