SmoothState onAfter callback

Question

I have a site that has elements like a slider on most pages. I am trying to implement the SmoothState JS but I am running into the issue of the second page breaking. I know through the documentation I probably need to add the onAfter callback but I was wondering where and how this would be applied. Apparently it can be tricky if unfamiliar with Ajax.

Here is the documentation on the issue.

And this is the code that I have that fires the script:

$(function(){
  'use strict';
  var $page = $('#uber'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        onStart: {
          duration: 250, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onReady: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);
          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

Does anyone have any ideas on how I would add the onAfter callback?

Answer 1

I've just started trying out smoothState, but here is what first worked for me.

$(document).ready(function(){
  prep(); 
});

$('#main').smoothState({
  onAfter: function() {
    prep();
  }
});


function prep(){

      $('#loadBtn').click(function () { 

          $( '#remote1' ).load( 'external.html #myExternalDiv', function( response, status, xhr ) {
            if ( status == 'error' ) {
              var msg = 'Sorry but there was an error: ';
              $( '#error' ).html( msg + xhr.status + ' ' + xhr.statusText );
            }
            $('#remote1').slideToggle();
          });

      }); 

} // prep

So I put stuff that would normally go into my $(document).ready section into a prep() function. Then I call that for both doc init and onAfter.