html - Uncaught TypeError with fadeIn in jQuery 1.9

Question

Here is the problem, unfortunately we have to support IE8.
So I had to change from using the latest jQuery 2.0+ back to jQuery 1.9.

Now we use a lot of jQuery to load up different sections of our dashboard, we fadeOut previous screens and fadeIn new screens. I thought I had fixed all of these problems with solutions I found here(prepend html) and here(ajax HTML).

However still having one more problem with the same error message below:

Error:

Uncaught TypeError: Cannot set property 'cur' of undefined 

I've narrowed down the source to the loadResource function, which is used to switch out content.

Basically if I comment out this line from the function below:

$content.fadeIn('fast');

And replace it with

$content.show();

The problem is solved and we no longer get that 'cur' error. However we lose our fadeIn effect.

How would you approach this problem that solves the Uncaught TypeError in jQuery 1.9 while keeping our fadeIn effect on $content?

var loadResource = function(url, params, callback) {
WHOAT.networking.getToServerWithAjax(url, params, function (response) {
        var $content = $($.parseHTML(response.trim()));
        var $container = $('#dashboard-display');
        var $content_to_hide = $container.children();

        $.when($content_to_hide.fadeOut('fast')).then(function () {
            $content.hide();
            $container.append($content);

            //$content.fadeIn('fast'); // <- buggy in 1.9.1
            $content.show(); // <- works, but no fadeIn

            $content_to_hide.remove();

            if(callback) {
                callback();
            }
        });
    });

// CSS updates...
};

Answer 1

STRANGE!

Ok so maybe I'm a unique case, after fiddling around and going through jQuery and our templates. I narrowed it down to this particular template (Mako / Python):

##conditional to determine with the template should inherit from the base page
##it shouldn't inherit from the base page is it is being inserted into the page using ajax
<%!
    def inherit(context):
        if context.get('isPage'):
            return "base_dashboard.mak"
        else:
            return None
%>
<%inherit file="${inherit(context)}"/>

<div id="dashboard-profile-container">
    <%include file="widgets/profile_widget.mak" />
</div>

<div class="spacer-div"></div>

All I had to do was remove the space-div:

<div class="spacer-div"></div>

Basically the template above was loading the HTML for the page that was causing the problem. I triple checked the HTML, everything was good there, but for some reason this empty spacer div was causing that Undefined error

Maybe for some reason that extra HTML node was causing an issue when jQuery tried to render the page