<p>So I just went through my article step-by-step and I indeed missed adding the new content into <code>$main</code>. I think there may have been a versioning mistake in the article's code as I definitely tested it.</p>

<p>Anyways, here's an updated <code>loadPage</code> function for you. Which I will be adding to the article tomorrow. I've added a few extra things to ensure that there's no content (like the footer if you include it in <code>layout.twig</code>) jumping when the content switches out, so feel free to modify that.</p>

<pre><code>loadPage = function(href) {

  $main.wrapInner('&lt;div class="new-results-div" /&gt;');

  /* ----- Get height of new container inside results container and to ensure the footer doesn't jump up -----  */
  var newResultsHeight = $('.new-results-div').outerHeight();
  $main.height(newResultsHeight);

  $('.js-ajax-wrapper').velocity('transition.fadeOut', {
    /* ----- Upon completion of animating out content put user at top of page. ----- */
    complete: function(){
      $('html').velocity("scroll", {
        duration: 0,
        easing: "ease",
        mobileHA: false
      });
    }
  });

  $.ajax({
    type: 'POST',
    url: href,
    data: {},
    success: function(result){
      /* ----- HERE'S WERE THE CONTENT GET'S ADDED ----- */
      $main.html(result);

      /* ----- Wrap content in div so we can get it's height ----- */
      $main.wrapInner('&lt;div class="new-results-div" /&gt;');

      /* ----- Get height of new container inside results container and set $main to it so there's no content jumpage -----  */
      var newResultsHeight = $('.new-results-div').outerHeight();
      $main.height(newResultsHeight);

      /* ----- Bring In New Content ----- */
      $('.js-main .js-ajax-wrapper').velocity('transition.fadeIn', {
        visibility: 'visible',
        complete: function() {
          /* ----- Removes the temp height from $main ----- */
          $main.css('height', '');
          ajaxLoad();
        }
      });
    },
    error: function(){
      console.log("error.");
      location.reload();
    }
  });

};
</code></pre>

<p>Apologize for any trouble due to the missing code. Feel free to let me know if you have any other questions.</p>

CC BY-SA 3.0
2016-11-08T11:29:03.937Z
Zack - I'm also not having much luck with this. I have implemented it and what seems to be happening is that when I click on the menu items it updates the Title but where the content should go, it is just empty, or height: 0 ? I'm wondering If I've set my template up wrong. do i add: {% extends (craft.request.isAjax and not craft.request.isLivePreview) ? "_ajax-layout" : "_layout" %}
 to the _ajax-layout.twig file?
Chris Mousdale
CC BY-SA 3.0
2015-11-20T04:33:57.423Z
2015-11-20T04:33:57.423Z
zackspear
<p>I'm a new craft user (previous EE user). trying to follow Zack Spear's directions (<a href="https://designbycosmic.com/journal/craft-cms-ajax-page-transitions-with-history-pushstate" rel="nofollow">https://designbycosmic.com/journal/craft-cms-ajax-page-transitions-with-history-pushstate</a>) for how to setup Ajax page transitions.</p>

<p>The final javascript example (the last code block) the new "loadPage" functions doesn't appears to have any line that actually loads the new content into $main. So when I implement the scripts as per those instructions, the fade in and out work, but the content that fades in is the same content from the previous page rather than the new content that should have replaced it.</p>

<p>Sorry if I'm being thick here, as I don't have a lot of Ajax experience. <strong>What do I need to add to the loadPage function to get this to work?</strong></p>

<ajax><javascript>
AJAX page transitions with history.pushState
# AJAX page transitions with history.pushState

(Asked by: username_0 on 2015-11-20)

I'm a new craft user (previous EE user). trying to follow Zack Spear's directions (<https://designbycosmic.com/journal/craft-cms-ajax-page-transitions-with-history-pushstate>) for how to setup Ajax page transitions.

The final javascript example (the last code block) the new "loadPage" functions doesn't appears to have any line that actually loads the new content into $main. So when I implement the scripts as per those instructions, the fade in and out work, but the content that fades in is the same content from the previous page rather than the new content that should have replaced it.

Sorry if I'm being thick here, as I don't have a lot of Ajax experience. **What do I need to add to the loadPage function to get this to work?**

**Tags:** ajax, javascript


---

## 1 answers

### Answer by username_1 on 2015-11-20. Score: 6 | Accepted answer

So I just went through my article step-by-step and I indeed missed adding the new content into $main. I think there may have been a versioning mistake in the article's code as I definitely tested it.
Anyways, here's an updated loadPage function for you. Which I will be adding to the article tomorrow. I've added a few extra things to ensure that there's no content (like the footer if you include it in layout.twig) jumping when the content switches out, so feel free to modify that.
loadPage = function(href) {

  $main.wrapInner('');

  /* ----- Get height of new container inside results container and to ensure the footer doesn't jump up -----  */
  var newResultsHeight = $('.new-results-div').outerHeight();
  $main.height(newResultsHeight);

  $('.js-ajax-wrapper').velocity('transition.fadeOut', {
    /* ----- Upon completion of animating out content put user at top of page. ----- */
    complete: function(){
      $('html').velocity("scroll", {
        duration: 0,
        easing: "ease",
        mobileHA: false
      });
    }
  });

  $.ajax({
    type: 'POST',
    url: href,
    data: {},
    success: function(result){
      /* ----- HERE'S WERE THE CONTENT GET'S ADDED ----- */
      $main.html(result);

      /* ----- Wrap content in div so we can get it's height ----- */
      $main.wrapInner('');

      /* ----- Get height of new container inside results container and set $main to it so there's no content jumpage -----  */
      var newResultsHeight = $('.new-results-div').outerHeight();
      $main.height(newResultsHeight);

      /* ----- Bring In New Content ----- */
      $('.js-main .js-ajax-wrapper').velocity('transition.fadeIn', {
        visibility: 'visible',
        complete: function() {
          /* ----- Removes the temp height from $main ----- */
          $main.css('height', '');
          ajaxLoad();
        }
      });
    },
    error: function(){
      console.log("error.");
      location.reload();
    }
  });

};

Apologize for any trouble due to the missing code. Feel free to let me know if you have any other questions.

> **Comments:**
> **username_2**: Zack - I'm also not having much luck with this. I have implemented it and what seems to be happening is that when I click on the menu items it updates the Title but where the content should go, it is just empty, or height: 0 ? I'm wondering If I've set my template up wrong. do i add: {% extends (craft.request.isAjax and not craft.request.isLivePreview) ? "_ajax-layout" : "_layout" %}  to the _ajax-layout.twig file?  

---

