smoothstate.js - back button sometimes doesn't work?

Question

I'm using the plugin smoothstate.js on my website. For some reason, every now and again when I navigate through the pages using the back and forward buttons, the back button stops working.

The URL changes but the content remains the same?

I've checked the console for errors this is displaying:

TypeError: Cannot read property 'state' of undefined

Does anyone know why this is happening? Like I said, the majority of the time it works okay but all of sudden it doesn't.

The code I'm using is like so:

$(function(){
  'use strict';
  var options = {
    prefetch: true,
    debug:true,
    cacheLength: 0,
    repeatDelay: 500,


    onStart: {
      duration: 0, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();
      }
    },

    onProgress: {
    // How long this animation takes
    duration: 0,
    // A function that dictates the animations that take place
    render: function ($container) {
                    $container.addClass('is-loading');

                    $('#progressBar').append('<div id="bar"></div>');   
                    var progress = '100%';

                    $('#bar').animate({
                        width: progress
                    }, 400);
    }
    },

    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        $container.removeClass('is-loading is-exiting');
        // Inject the new content
        $container.html($newContent);
      },
    },

    onAfter: function() {
            navbarAnimate();
            closeMenu();
            ImageSliders();
            initPhotoSwipeFromDOM('.gallery');
            ImageOverlay(); 
            window.parsePinBtns();
            backToTop();

    }
  },


  smoothState = $('#main').smoothState(options).data('smoothState');
});

jackloader · Accepted Answer · 2018-06-26T16:21:20.610

I also ran into this issue which happens when the back and forward buttons are clicked too fast without the page fully loading. A hacky solution for me was to reload the page if page.cache[page.href] is undefined.

/** Handles the popstate event, like when the user hits 'back' */
onPopState = function(e) {
  if(e.state !== null || typeof e.state !== undefined) {
    var url = window.location.href;
    var $page = $('#' + e.state.id); 
    var page = $page.data('smoothState');
 
 if (typeof(page.cache[page.href]) !== 'undefined') {
  var diffUrl = (page.href !== url && !utility.isHash(url, page.href));
  var diffState = (e.state !== page.cache[page.href].state); 

  if(diffUrl || diffState) {
    if (diffState) {
   page.clear(page.href);
    }
    page.load(url, false);
  }
 }
 else {
  //reload the page if page.cache[page.href] is undefined
  location.reload();
 }
    
  }
},

smoothstate.js - back button sometimes doesn't work?

1 Answers1