title: Mustache js - template for navigation not loaded sometimes
body: <p>I'm building a site with the help of Mustache js. There is quite a lot of data in the top navigation.</p>
  
  <p>The problem is that approximately half of the time when I load the html, the navigation is not loaded/missing -The output is an empty div :</p>
  
  <pre><code>&lt;div id="nav"&gt; &lt;/div&gt; 
  </code></pre>
  
  <p>Here is the html code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;script type="text/javascript" src="js/lib/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/lib/mustache.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/templates.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="all" /&gt;
  &lt;/head&gt;
  &lt;body id="productPage"&gt;
  &lt;div id="header"&gt;
      {{{header}}}
      &lt;div id="nav"&gt;
          {{{nav}}}
      &lt;/div&gt;
  &lt;/div&gt;
  ...
  ...
  ...
  </code></pre>
  
  <p>Here are the templates : </p>
  
  <pre><code>var Templates = {
      'header':           '&lt;div id="headerWrapper"&gt;' +
                          '&lt;div id="logo" class="left"&gt;&lt;img src="images/logo.png"    /&gt;&lt;/div&gt;'+
                          '&lt;div class="right"&gt;'+
                              '&lt;div class="search"&gt;&lt;/div&gt;'+
                              '&lt;div class="login"&gt;Login&lt;/div&gt;'+
                          '&lt;/div&gt;' +
                          '&lt;ul class="user_type"&gt;'+
                              '{{#user_type_list}}'+
                              '&lt;li&gt;&lt;a href="{{user_type_element_link}}"&gt;{{user_type_element_text}}&lt;/a&gt;&lt;/li&gt;'+
                              '{{/user_type_list}}'+
                          '&lt;/ul&gt;'+
                          '&lt;div id="menuWrapper" class="clearfix"&gt;&lt;/div&gt;' +
                              '&lt;div class="clearfix"&gt;&lt;/div&gt; ' +
                          '&lt;/div&gt;',
  'nav':              '&lt;ul id="menu"&gt;' +
                          '{{#menu_links}}' +
                          '&lt;li class="menu_top" id="{{menu_id}}"&gt;' +
                              '&lt;a href="{{menu_link}}"&gt;{{menu_text}}&lt;/a&gt;' +
                              '&lt;div class="menu_content"&gt;&lt;/div&gt;' +
                          '&lt;/li&gt;' +
                          '{{/menu_links}}' +
                      '&lt;/ul&gt;',
  'products_services':    '&lt;div class="submenu"&gt;' +
                          '&lt;ul class="top_list left"&gt;' +
                              '{{#top_list}}' +
                              '&lt;li class="top_list_elem"&gt;' +
                                  '&lt;a href="{{top_list_link}}"&gt;{{top_list_text}}&lt;/a&gt;' +
                                  '&lt;div class="extraInfo"&gt;' +
                                      '&lt;div class="categories"&gt;' +
                                          '&lt;ul&gt;' +
                                              '{{#categories}}' +
                                              '&lt;li class="category"&gt;' +
                                                  '&lt;div class="cat_name"&gt;{{category_name}}&lt;/div&gt;' +
                                                  '&lt;ul class="subcategories"&gt;' +
                                                      '{{#subcategories}}' +
                                                      '&lt;li class="sub_category"&gt;&lt;a href="{{subcategory_link}}"&gt;{{subcategory_name}}&lt;/a&gt;&lt;/li&gt;' +
                                                      '{{/subcategories}}' +
                                                  '&lt;/ul&gt;' +
                                              '&lt;/li&gt;' +
                                              '{{/categories}}' +
                                          '&lt;/ul&gt;' +
                                      '&lt;/div&gt;' +
                                      '&lt;div class="teasers"&gt;' +
                                          '{{#teasers}}' +
                                          '&lt;div class="teaser"&gt;' +
                                              '&lt;a href="{{teaser_link}}"&gt;' +
                                                  '&lt;img src="images/nav_teaser.jpg"/&gt;' + 
                                              '&lt;/a&gt;' +
                                              '&lt;div class="caption"&gt;' +
                                                  '&lt;a href="{{teaser_link}}"&gt;{{teaser_caption}}&lt;/a&gt;' +
                                              '&lt;/div&gt;' +
                                          '&lt;/div&gt;' +
                                          '{{/teasers}}' +
                                      '&lt;/div&gt;' +
                                  '&lt;/div&gt;'+
                              '&lt;/li&gt;' +
                              '{{/top_list}}' +
                          '&lt;/ul&gt;' +
                          '{{#appointment}}' +
                              '&lt;div class="right"&gt;&lt;a href="#"&gt;Appointment&lt;/a&gt;&lt;/div&gt;' +
                          '{{/appointment}}' +
                      '&lt;/div&gt;',
  'footer':           '&lt;div id="footerWrapper" class="clearfix"&gt;' +
                          '&lt;ul&gt;' +
                          '{{#footer_list}}' +
                              '&lt;li&gt;' +
                                  '&lt;div class="title"&gt;{{footer_title}}' +
                                  '&lt;/div&gt;' +
                                  '&lt;ul&gt;' +
                                  '{{#footer_sub_list}}' +
                                      '&lt;li&gt;' +
                                          '&lt;a href="{{footer_sub_link}}" class="{{footer_sub_link_class}}"&gt;' +
                                          '{{footer_sub_link_title}}' +
                                          '&lt;/a&gt;' +
                                      '&lt;/li&gt;' +
                                  '{{/footer_sub_list}}' +
                                  '&lt;/ul&gt;' +
                              '&lt;/li&gt;' +
                          '{{/footer_list}}' +
                          '&lt;/ul&gt;' +
                      '&lt;/div&gt;'
  </code></pre>
  
  <p>}</p>
  
  <p>And this is the main js :</p>
  
  <pre><code>jQuery(document).ready(function($){
  $.templates = function(page)
  {
      var plugin = this;
      var mustache;
      plugin.init = function() {
          getHeader();
          getNav();
          getFooter();
      }
  
      var getHeader = function(){
          ...
      };
  
      var getNav = function(){
          var template = Templates.nav;
          var pages = ["products_services"];
         // setTimeout(function() {
  
              $.ajax({
                  type: "GET",
                  url: "data/menu.json",
                  dataType: "JSON",
                  success: function(data) {
                      $('#menuWrapper').html(Mustache.render(template, data));
  
                      $.each(pages, function(key, val){
                          var template = Templates[val];
                          $.ajax({
                              type: "GET",
                              url: "data/"+val+".json",
                              dataType: "JSON",
                              success: function(data) {
                                  var html = Mustache.render(template, data);
                                  var menuContent = $('#'+val).find('.menu_content');
                                  menuContent.html(html);
                                  menuContent.find('.top_list_elem').bind('mouseenter', function(){
                                      var categories = $(this).find('.categories');
                                      var teasers = $(this).find('.teasers');
                                      var categoriesH = categories.outerHeight(true);
                                      var teasersH = teasers.outerHeight();
                                      var height;
                                      if((categories.width() + teasers.width()) &gt; $(window).width())
                                          height = categoriesH + teasersH;
                                      else
                                          height =  Math.max(categoriesH, teasersH);
                                      menuContent.height(height + 50);
                                  });
                                  menuContent.bind('mouseleave', function(){
                                      $(this).height('');
                                  });
                              }
                          });
                      });
                  }
              })/*;},30)*/;
      };
  
  
      var getFooter = function(){
          ...
      };
  
      plugin.init();
  }
  $.fn.templates = function(page)
  {
      return this.each(function()
      {
          if (undefined == $(this).data('templates'))
          {
              var plugin = new $.templates(page);
              $(this).data('templates', plugin);
          }
      });
  }
  var body = $('body');
  var page = body.attr('id');
  body.templates(page);
  
  });
  </code></pre>
  
  <p>If it helps with anything.... : If I add the timeOut function that's commented out it works, but when I simulate a slow internet connection, the problem still exists..</p>
  
  <p>The json files:</p>
  
  <p>menu.json:</p>
  
  <pre><code>{
  "menu_links": [
      {
          "menu_link": "#",
          "menu_text": "link1",
          "menu_id": "link1"
      },
      {
          "menu_link": "#",
          "menu_text": "link2",
          "menu_id": "link2"
      },
      {
          "menu_link": "#",
          "menu_text": "link3",
          "menu_id": "link3"
      },
      {
          "menu_link": "#",
          "menu_text": "link4",
          "menu_id": "link4"
      }
  
  ]
  } 
  </code></pre>
  
  <p>products_services.json is very long, so here is a snippet :</p>
  
  <pre><code>{
  "top_list": [
      {
          "top_list_link": "#",
          "top_list_text": "Top List Text",
          "categories": [
              {
                  "category_name": "Name",
                  "subcategories": [
                      {
                          "subcategory_link": "#",
                          "subcategory_name": "Subcategory name 1"
                      },
                      {
                          "subcategory_link": "#",
                          "subcategory_name": "Subcategory name 1"
                      },
                      {
                          "subcategory_link": "#",
                          "subcategory_name": "Subcategory name 1"
                      },
                      {
                          "subcategory_link": "#",
                          "subcategory_name": "Subcategory name 1"
                      },
                      {
                          "subcategory_link": "#",
                          "subcategory_name": "Subcategory name 1"
                           ...
              ...
  </code></pre>
  
  <p>I hope I provided enough information.
  Thank you for the answers in advance!</p>