title: AJAX resulting in not consistently showing the right content
body: <p>I'm doing a website and I want no URL change at all when navigating. So I'm using fully AJAX generated content.</p>
  
  <p>Here's the link : <a href="http://nestecha.fr/confi/" rel="nofollow">http://nestecha.fr/confi/</a></p>
  
  <p>So when you first arrive on the page it's all fine, but when you click on either "News" or "TV", it will :</p>
  
  <ul>
  <li>Sometimes work absolutely fine and generate all the content as I want it to.</li>
  <li>Sometimes not work at all, will generate content RANDOMLY, sometimes one row will load, sometimes it won't even be ordered in the right way, sometimes nothing will be loaded at all. </li>
  </ul>
  
  <p>I can't see what's going on since it seems to be random. Sometimes it works, sometimes it doesn't. </p>
  
  <p>Why is that ?</p>
  
  <p>Thanks !</p>
  
  <p>Here's some of the most important code that I believe is flawed :</p>
  
  <pre><code>// When we click on "News"
  $('li a[href^=index]').on('click', function() {
      event.preventDefault();
  
      var $sPage = '';
          $.ajax({
              url: 'webservice/newsShowReel.php',
              dataType: 'json'
          })
              .done(function (result) {
                  $sPage += '&lt;div class="container"&gt;';
                  $sPage += '&lt;div class="row"&gt;&lt;div class="col-xs-12 text-center title"&gt;&lt;h1&gt;Show Réel&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;';
                  $sPage += '&lt;div class="row"&gt;';
                  $sPage += '&lt;section class="col-xs-12 text-center showreel"&gt;';
                  $sPage += '&lt;div class="view view-third"&gt;';
                  $sPage += '&lt;img src="'+ result['image'] +'" class="img-responsive"&gt;';
                  $sPage += '&lt;div class="mask"&gt;';
                  $sPage += '&lt;h2&gt;'+ result['titre'] +'&lt;/h2&gt;';
                  $sPage += '&lt;p&gt;'+ result['description'] +'&lt;/p&gt;';
                  $sPage += '&lt;a class="fancybox-media info" rel="group" href="'+ result['lien'] +'"&gt;Visionner&lt;/a&gt;';
                  $sPage += '&lt;/div&gt;';
                  $sPage += '&lt;/div&gt;';
                  $sPage += '&lt;/section&gt;';
                  $sPage += '&lt;/div&gt;';
              });
      $.ajax({
          url: 'webservice/newsNouveautes.php',
          dataType: 'json'
      })
          .done(function(result) {
              $sPage += '&lt;div class="row"&gt;&lt;div class="col-xs-12 text-center title"&gt;&lt;h1&gt;Nouveautés&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;';
              $sPage += '&lt;div class="row"&gt;';
              $sPage += '&lt;div id="owl"&gt;';
              $.each(result, function(key, resultSingle) {
                  $sPage += '&lt;div class="item"&gt;';
                  $sPage += '&lt;div class="viewSmall view-thirdSmall"&gt;';
                  $sPage += '&lt;img src="'+ resultSingle['image'] +'" class="img-responsive"&gt;';
                  $sPage += '&lt;div class="maskSmall"&gt;';
                  $sPage += '&lt;h2&gt;'+ resultSingle['titre'] +'&lt;/h2&gt;';
                  $sPage += '&lt;p&gt;'+ resultSingle['description'] +'&lt;/p&gt;';
                  $sPage += '&lt;a class="fancybox-media info" rel="group" href="'+ resultSingle['lien'] +'"&gt;Visionner&lt;/a&gt;';
                  $sPage += '&lt;/div&gt;';
                  $sPage += '&lt;/div&gt;';
                  $sPage += '&lt;/div&gt;';
              });
              $sPage += '&lt;/div&gt;';
              $sPage += '&lt;/div&gt;';
              $sPage += '&lt;/div&gt;';
          });
  
      $('#page').fadeOut('slow', function() {
          $('#page').html($sPage).fadeIn('slow');
  
          $("#owl").owlCarousel({
  
              autoPlay: false, //Set AutoPlay to 3 seconds
  
              items : 4,
              itemsDesktop : [1199,4],
              itemsDesktopSmall : [990,2]
  
          });
      });
  });
  </code></pre>