Cannot read property 'addClass' of undefined with smoothState.js in Wordpress

Question

I'm trying to implement smoothState.js into a custom WordPress theme. I'm flummoxed. I feel like my code is correct according to the smoothState documentation, but it's still producing an error. But I'm still a beginner at JS/JQuery and scripting in general so I'm probably missing something.

Using JQMigrate version 1.4.1 and JQuery 1.12.4 in noConflict mode. WordPress is 4.6.1.

jQuery(document).ready(function($){ // WordPress doesn't release $ so we need this line
$(function() {
    var $body = $('html, body'),
    content = $('#wrapper').smoothState({
        prefetch: true,
        pageCacheSize: 4,
        debug: true,
        // onStart is for when a link is clicked
        onStart: {
            duration: 2500, // animation duration in ms
            render: function (url, $container) {
                $container.addClass('is-exiting');
                $body.animate({
                    scrollTop: 0
                });
                smoothState.restartCSSAnimations();
            }
        },
        onEnd : {
            duration: 1500, \
            render: function (url, $container, $content) {
                $container.removeClass('is-exiting');
                $body.css('cursor', 'auto');
                $body.find('a').css('cursor', 'auto');
                $container.html($content);
                // Trigger document.ready and window.load
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter : function(url, $container, $content) {

        }
    }).data('smoothState');
});

(function($, undefined) {
    var isFired = false;
    var oldReady = jQuery.fn.ready;
    $(function() {
        isFired = true;
        $(document).ready();
    });
    jQuery.fn.ready = function(fn) {
        if(fn === undefined) {
            $(document).trigger('_is_ready');
            return;
        }
        if(isFired) {
            window.setTimeout(fn, 1);
        }
        $(document).bind('_is_ready', fn);
    };
})(jQuery);

});

Clicking any hyperlink inside #wrapper throws the following console error...

Uncaught TypeError: Cannot read property 'addClass' of undefined
    w @ jquery.smoothState.min.js:9
    b @ jquery.smoothState.min.js:9
    dispatch @ jquery.js?ver=1.12.4:3
    r.handle @ jquery.js?ver=1.12.4:3

I've checked for any potential plugin or theme conflicts and found none. I've even tried explicitly declaring the container like var $container = $("#wrapper"); but still get the same results. Any ideas?

Hi there, do you call somewhere the render method? And also I can leave only $container as argument in the render method to see if changes something? And if you can provide jsfiddle link, to check better the problem — user1952854, Sep 08 '16 at 14:42
Here is a fiddle with the basic elements: https://jsfiddle.net/dbqdy743/ If I remove the other arguments I get `Uncaught ReferenceError: smoothState is not defined` — Zachary Reese, Sep 08 '16 at 14:54
Unfortunately, there is no error in the fiddle. Also the selector $('#wrapper') is for ID and in the html is class. I don't think that is the problem, but you can check in your code if it's the same. — user1952854, Sep 08 '16 at 15:04
Oops, that was an error in the fiddle. Updated it to be an ID. Thanks for pointing that out! — Zachary Reese, Sep 08 '16 at 15:07

score 0 · Accepted Answer · answered Sep 08 '16 at 15:37

After looking over the smoothState onStart documentation it seems the render function only accepts a single argument like so:

$('#main').smoothState({
  onStart: {
    // How long this animation takes
    duration: 0,
    // A function that dictates the animations that take place
    render: function ($container) {}
  }
});

Your code has two:

render: function (url, $container) {

This would likely cause your render function url argument to be set to $container as it is the first argument passed, and the $container argument to be undefined, as the argument is never passed/set. Thus, when you call:

$container.addClass('is-exiting');

You receive the error:

Cannot read property 'addClass' of undefined

Because $container is not an object.

Not sure if that's the case. At the very least, the examples in the smoothState readme have multiple arguments... https://github.com/miguel-perez/smoothState.js#options-example — Zachary Reese, Sep 08 '16 at 18:46
The examples only show the onBefore and onReady object's render functions accepting multiple arguments. Since you are defining the onStart render function however, you will need to pass just a single argument as it only accepts one. — Steven Leimberg, Sep 08 '16 at 21:28

Cannot read property 'addClass' of undefined with smoothState.js in Wordpress

1 Answers1