title: How to correctly use Promise.then() in JavaScript?
body: <p>I'm trying to run some functions one after another using Promises but somehow the second function is either executed before the first one or not at all. 
  The situation is this:</p>
  
  <p>I have the following  have functions:</p>
  
  <ul>
  <li>One that loads re-usable html code from a partials folder:</li>
  </ul>
  
  
  
  <pre class="lang-js prettyprint-override"><code>    function insertingPartials() {
          return new Promise( function(resolve,reject) {
              $('#navbar-placeholder').load('/Assets/Partials/navbar.html');
              $('#jumbotron-placeholder').load('/Assets/Partials/jumbotron.html');
              $('#footer-placeholder').load('/Assets/Partials/footer.html');
  
              resolve();
              reject('Error');
          });
  </code></pre>
  
  
  
  <ul>
  <li>One that makes language adjustments</li>
  </ul>
  
  
  
  <pre class="lang-js prettyprint-override"><code>function languageSpecifics() {
      return new Promise( function(resolve,reject) {
          //showing correct text per html language
          $('span[lang=' + $('html')[0].lang + ']').show();
          $('div[lang=' + $('html')[0].lang + ']').show();
          //disabling the current language from the language selection menu
          $('a[lang=' + $('html')[0].lang + ']').addClass('disabled');
          //links dynamically point to the correct sub-pages
          $('.blog-link').attr('href', '/' + $('html')[0].lang + '/Blog/');
          $('.prod-link').attr('href', '/' + $('html')[0].lang + '/' + $('.prod-link span[lang=' + $('html')[0].lang + ']').text() + '/');
          $('#en').attr('href', window.location.href.replace($('html')[0].lang, 'en'));
          $('#es').attr('href', window.location.href.replace($('html')[0].lang, 'es'));
          $('#ro').attr('href', window.location.href.replace($('html')[0].lang, 'ro'));
  
          resolve();
          reject('Error in ' + arguments.callee.name);
      });
  }
  </code></pre>
  
  
  
  <ul>
  <li>One that slides content into view:</li>
  </ul>
  
  
  
  <pre class="lang-js prettyprint-override"><code>function loadContent() {
      return new Promise( function(resolve,reject) {
          //fading content in
          $('nav').animate({top: '0'});
          $('footer').animate({bottom: '0'});
          $('.main-content').animate({right: '0'}).css('overflow', 'auto');
          //fading preloading out
          $('.spinner-border').fadeOut();
          $('#preloading').removeClass('d-flex').addClass('d-none');
  
          resolve();
          reject('Error in ' + arguments.callee.name);
      });
  }
  </code></pre>
  
  
  
  <ul>
  <li>and one that adjusts the height of the container</li>
  </ul>
  
  
  
  <pre class="lang-js prettyprint-override"><code>function setContainerHeight() {
      //setting the height of the container
      $('.container').css('height', $('body').height() - ($('nav').height() + $('footer').height()) + 'px');
  }
  </code></pre>
  
  
  
  <p>What I'm trying to do is have the functions execute in the order in which I placed them above. The below code outputs 1,2,3,4 yet function "languageSpecifics" doesn't execute or it executes before "insertingPartials", because the partials are loaded and the components then slide into view, yet text cannot be seen and neither do the links point to anywhere.</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready( function() {
  
      console.log('1')
      insertingPartials().then( function() {
          console.log('2');
          languageSpecifics().then( function() {
              console.log('3');
              loadContent().then( function() {
                  console.log('4');
                  setContainerHeight();
              });
          });
      });
  
  });
  </code></pre>
  
  
  
  <p>If I execute the functions separately in the browser console I get the desired output and every promise returns fulfilled. If I run them with .then() the promise returns pending and I don't get any text on the page. ( both nested ".then(.then() ) and same level ".then().then()" give the same results)</p>
  
  <p>I'd like to know what I'm doing wrong here.
  Also if there is a better / more efficient way of achieving what I'm trying to do here please advise.</p>