Columns only firing on window reload w/AJAX + Facet WP

[KNC-KK]

I realize this is virtually the same issue as #136, but none of the fixes in there have worked for me yet.

I've got a three-column, two-row list of downloads using the Bootstrap grid template, populated by a query being run by FacetWP. Each individual box is wrapped with <div class="download-box">.

This is what it looks like when MatchHeight is working:

This is being achieved with the following code:

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

    $(function() {
        $.fn.matchHeight._maintainScroll = true;
        $(".download-box").matchHeight();
    });

    $( document ).ajaxComplete(function() {
        $(".download-box")
            .matchHeight('remove')
            .matchHeight();
    }); 
});

This works fine until one clicks through to the next page of downloads with the FacetWP AJAX pager, at which point, the .download-box container defaults to 161px tall and all the content (images, text, etc) ends up spilling out of the containers and also overlapping each other:

Now, if I resizing the browser window after loading, everything lines up like it should.

I've also tried substituting $( document ).ajaxComplete(function() { with $(document).on('facetwp-loaded', function() { but that only breaks the function entirely (as you can see, JQuery/JS isn't at all my strong suit).

I've also tried adding $.fn.matchHeight._update() - which I feel is probably part of the problem, seeing as the content in the AJAX containers IS changing as one pages through the website - but I haven't been able to get it to work (and my lack of knowledge makes it a wee bit difficult to figure out where in this JS file it really belongs).

EDIT: Just tried wrapping it with setTimeout as follows, to no avail, so the time before the object reload doesn't seem to be the problem:

jQuery(document).ready(function($){
setTimeout(function(){
    $(function() {
        $.fn.matchHeight._maintainScroll = true;
        $.fn.matchHeight._update()
        $(".download-box").matchHeight();
    });

    $( document ).ajaxComplete(function() {
        $(".download-box")
            .matchHeight('remove')
            .matchHeight();
    }); 
    },500);
});

Any help would be greatly appreciated.

Thank you!

-KK

[KNC-KK]

Murphy's law: Post the question, find the code that works a half-hour later.

Adding a timeout around AjaxLoadMore.loadPosts worked:

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

    $(function() {
        $.fn.matchHeight._maintainScroll = true;
        $(".download-box").matchHeight();
    });

    $( document ).ajaxComplete(function() {
        $.when('AjaxLoadMore.loadPosts').done(function() {
                setTimeout(function() {
                        $.fn.matchHeight._apply('.download-box');
                    }, 200);
            });
    }); 
});

Gotta give @gnistdesign props for suggesting it in #31.

-Kurt