Height issues with ajax

[gnistdesign]

Hi,

I'm using matchHeight() on a WordPress site, and its working fine on initial render. But I'm using Ajax Load More to load more posts, using jQuery's ajaxComplete() to update the height on loaded posts. It's working fine on the first load, but on the second load the heights are set to high (should be around 300px, gets set to around 500px).

Here is my JS:

    jQuery.noConflict();
    jQuery(document).ready(function($){

        $(function() {
            $('#employees .person').matchHeight();
        });

        $( document ).ajaxComplete(function() {
            $.fn.matchHeight._apply('#employees .person')
            $.fn.matchHeight._maintainScroll = true;
        }); 

    });

And ideas?

[liabru]

I think you're maybe better doing something more like:

jQuery(document).ready(function($){

    $(function() {
        $.fn.matchHeight._maintainScroll = true;
        $('#employees .person').matchHeight();
    });

    $( document ).ajaxComplete(function() {
        $('#employees .person')
            .matchHeight('remove')
            .matchHeight();
    }); 

});

Does that help?

[gnistdesign]

Alas, no – that didn't help.

After much trying, the best I've been able to come up with is this:

       $( document ).ajaxComplete(function() {
            $.when('AjaxLoadMore.loadPosts').done(function() {
                setTimeout(function() {
                    $.fn.matchHeight._apply('#employees .person');
                }, 300);
            });
        }); 

ALM uses a slide (or fade) effect that takes 300 ms. If I don't put in the delay, the heights are set way to high. And the page «jumps» when heights are set, no matter if I have the delay or not.

[liabru]

Are you saying it works correctly if you apply after the animation is done?
Because that's what I'd expect you'd need to do really.

In terms of the jumping, do you mean _maintainScroll doesn't help at all?
A jsfiddle or link would be useful if you could provide one

[liabru]

Closing as I assume you have solved the issue. If not please comment and I will reopen, thanks.

[apmeyer]

I can confirm that the initial recommendation above from @liabru works well with the WordPress Plugin Ajax Load More almComplete callback. Thank you for that tip!

[pierre-r]

Hello,

It is not the first time I am confronted to this issue.
If, like me, you are using the Data API, $.fn.matchHeight._update(); doesn't seem to work for some reasons.
Instead, I am calling $.fn.matchHeight._applyDataApi();

Here is an exemple :

// statechangecomplete is the event I trigger when AJAX call has successfully ended
$(window).on('load statechangecomplete', function () {
    $.fn.matchHeight._applyDataApi();
});