jQuery add/removeClass & AJAX not working

Question

I'm using Isotope with AJAX to pull in some posts in WordPress, pretty much everything is there, except for the default Isotope animation runs when I AJAX in content, which looks a bit weird. I still wanted it to animate when filtered though.

So I thought I could just use add/removeClass within my AJAX function to turn it off/on when needed, but if I do the animation never runs.

Any ideas where I'm going wrong here?

var page = 1;
var loading = true;
var $window = $(window);
var $content = $('.isotope');

if( $('body').hasClass('home') ) {
    var loopHandler = '/inc/loop-handler.php';
} else {
    var loopHandler = '/inc/loop-handler-archive.php';
}

var load_posts = function(){
        $.ajax({
            type       : "GET",
            data       : {numPosts : 1, pageNumber: page},
            dataType   : "html",
            url        : templateDir+loopHandler,
            beforeSend : function(){
                if(page != 1){
                    $('.loader').append('<div id="temp_load" style="text-align:center; z-index:9999;">\
                        <img src="'+templateDir+'/img/ajax-loader.gif" />\
                        </div>');
                }
            },
            success    : function(data){

                $data = $(data);
                if($data.length){

                    var itemHeight = $('.item').height();
                    var height = $content.height()+itemHeight*2;


                    $content.append($data);

                    $content.css('min-height', height);

                    $data.hide();

                    // should stop the animation
                    $('.isotope').addClass('no-transition');

                    $content.isotope('destroy');

                    $content.imagesLoaded( function(){

                        $content.isotope({
                          // options
                          layoutMode: 'fitRows',
                          itemSelector : '.item'
                        });

                    });

                    $data.fadeIn(700, function(){
                        $("#temp_load").fadeOut(700).remove();
                        loading = false;
                    }); 

                    // should start up the animation again
                    $('.isotope').removeClass('no-transition');

                    $content.css('min-height', '0');



                } else {
                    $("#temp_load").remove();
                }
            },
            error     : function(jqXHR, textStatus, errorThrown) {
                $("#temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
    });
}


$window.scroll(function() {
    var content_offset = $content.offset(); 
    console.log(content_offset.top);
    if(!loading && ($window.scrollTop() + 
        $window.height()) > ($content.scrollTop() +
        $content.height() + content_offset.top)) {
            loading = true;
            page++;
            load_posts();
    }
});
load_posts();

If you need any of the HTML/PHP I'm happy to post it up. Also, here's the dev site if you want to check it out.

Answer 1

I don't know Isotope and I have not tested if it works. But I have refactor your code with annotations to help you better understand the problem.

I think it comes from how you call removeClass and addClass successively, the two instantly cancel.

var page = 1;
var loading = true;
var $window = $(window);
var $content = $('.isotope');
var loopHandler = '/inc/loop-handler.php';

var isotopeController = {
    append: function($data) {

        // Add AJAX data
        var itemHeight = $('.item').height();
        var height = $content.height() + itemHeight * 2;
        $content.append($data);
        $content.css('min-height', height);

        // Stop
        isotopeController.stop($data);

        // Restart
        $content.imagesLoaded(function() {
            // When images loaded !
            isotopeController.start($data);
        });
    },
    start: function($data) {

        // Start isotope
        $content.isotope({
            layoutMode: 'fitRows',
            itemSelector: '.item'
        });

        // Show data
        $data.fadeIn(700, function() {
            $("#temp_load").fadeOut(700).remove();
            loading = false;
        });

        // Start the animation
        $content.removeClass('no-transition');
        $content.css('min-height', '0');
    },
    stop: function($data) {

        // Hide data
        $data.hide();

        // Stop the animation
        $content.addClass('no-transition');

        // Stop isotope
        $content.isotope('destroy');
    },
    loadPosts: function() {
        $.ajax({
            type: "GET",
            data: {
                numPosts: 1,
                pageNumber: page
            },
            dataType: "html",
            url: templateDir + loopHandler,
            beforeSend: function() {
                if (page != 1) {
                    $('.loader').append('' +
                        '<div id="temp_load" style="text-align:center; z-index:9999;">' +
                        '<img src="' + templateDir + '/img/ajax-loader.gif" />' +
                        '</div>'
                    );
                }
            },
            success: function(data) {
                var $data = $(data);
                if ($data.length) {
                    isotopeController.append($data);
                } else {
                    $("#temp_load").remove();
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $("#temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
    }
};

$window.scroll(function() {
    var content_offset = $content.offset();
    if (!loading && ($window.scrollTop() + $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
        loading = true;
        page++;
        isotopeController.loadPosts();
    }
});

// On load
$(function() {
    if (!$('body').hasClass('home')) {
        loopHandler = '/inc/loop-handler-archive.php';
    }
    isotopeController.loadPosts();
});