$.fn update not firing

[wonderment]

I have a group which has content appended to it via AJAX. At the end of the images loading in the group, I show the content.

If I use: $('.blocks').matchHeight(true); it works perfectly fine.

If I use: $('.blocks').matchHeight(true); outside of the $.ajax call and try utilizing $.fn.matchHeight._update(); to trigger an update when the content is shown, it doesn't fire.

I have a few other areas where the content is dynamically adjusted and I'd like to have the matchHeight updated but as of now, I can't do that. I assume sprinkling .matchHeight(true); 's everywhere is probably not the greatest option, so hopefully, I'm just missing something painfully obvious. 😄

[liabru]

What you're describing seems to be the correct approach and should work.
It might be down to how the content is being added or the type of content, I'm not sure.
Do you have a jsfiddle showing the issue?

[RoFiks]

I'm having the same problem. $.fn.matchHeight._groups has the right object inside, but the update isn't working. Even when I recall the $('.blocks').matchHeight(); function, the height doesn't get added to the elements. Hope you can help!

[florianziegler]

Same problem. $.fn.matchHeight._update(); doesn't seem to work/fire.

[dejardine]

Anyone have a work around for this?

[oilvier]

It seems to work with previous version 0.5.2.

[liabru]

Can somebody please provide a jsfiddle that reproduces this? Thanks

[jackmcconnell]

I'm having this issue too.
I'm using a function in the finished callback in infinite-scroll to trigger $.fn.matchHeight._update(); but, as above, it doesn't fire. $.fn.matchHeight._maintainScroll = true; works just fine in this situation however.

Edit: It doesn't look like it's working in any callback function. So far tested with isotope and blazy.

[liabru]

I think the problem here may be a misunderstanding of how the plugin works.

When you call the _update() function, it will only update the original elements that you have previously applied matchHeight to. Any new elements matching any previously used selectors will not be included because it does not update the set of selected elements.

Instead you need to create a new selection that includes the new element and remove the old one.

Here is an example:

// the original group of .item
$('.item').matchHeight();

// make some ajax call
$.get('/api/something').done(function() { 
    // a new .item is added, but this is not in the original group
    $('body').append('<div class="item">');

    // remove the old group
    $('.item').matchHeight({ remove: true });

    // apply matchHeight on the new selection, which includes the new element
    $('.item').matchHeight();
})

I hope that clears things up.

If this still doesn't solve the problem you guys are having, please provide more information and an example. Thanks.

[jackmcconnell]

Thanks @liabru,
I don't think that's what's happening in my situation though.

I have a page with boxes on it, consisting of text and images. I'm using Isotope to load all of the boxes on the page on load. The box container has a class of equalheight and i'm using the following to load matchHeight on the boxes inside:

jQuery('.equalheight').each(function() {
  jQuery(this).children().matchHeight({
    byRow: true
  });
});

I'm then using filtering in Isotope to filter all the items. It's not loading in anything new.
Here're the code for Isotope:

var container = jQuery('.boxes').imagesLoaded( function() {
            container.fadeIn(800).isotope({
                layoutMode: 'fitRows',
                itemSelector: '.isotope',
                transitionDuration: '0.5s'
            });

            // When layout is complete
            container.on( 'layoutComplete', function(event, laidOutItems) {
                bLazy.load(laidOutItems);
                $.fn.matchHeight._update();
            });
        });

        // Filter
        jQuery('.box-filter a').click( function() {
            var filterValue = jQuery( this ).attr('data-filter');
            jQuery('.box-filter a').removeClass('selected');
            jQuery(this).addClass('selected');

            // Filter Isotope
            jQuery('.boxes').isotope({ 
                filter: filterValue
            });
        });

For some reason though, everything has a height of 6px. This might be that lazy loading hasn't taken effect yet however, even so, when the boxes do show, the $.fn.matchHeight._update(); function should ensure that the items are updated with new heights but it's not working.

Hope this helps.
Jack

[apeitup]

voltronik

Change the line

$.fn.matchHeight._update();

to jQuery.fn.matchHeight._update();

It worked for me in one instance the other issue I had was it was being called before all of the other elements were finished resizing so I set a delay. Hope that helps.

[jackmcconnell]

@apeitup Changing $ to jQuery seemed to do the trick for some reason. I've still got some crazy overlapping and filtering issues with Isotope but i'll work those out in due course.

Thanks!

[apeitup]

From my experience from isotope it needs to be called after the layout is set as it uses the dimensions of the item to position them on screen. So calling matchheight after could be causing the issues

[jackmcconnell]

@apeitup Brilliant, thanks, i'll try that!

[martajohnsson]

I have a ajax call that loads new gallery items but sometimes it fails to set a proper height. I did try to do "remove" but i does't help. Any ideas why?

    $.ajax({
        url: "/List/GalleryView",
        data: {
            query: viewQuery,
            p: page
        },
        type: "POST"
    }).done(function (data) {
        $("#gallerylist").empty().html(data);
            $('.gallery-item').matchHeight({ remove: true });
            $('.gallery-item').matchHeight({ byRow: false });
            ShowGalleryList(); //remove hidden on div if it was list before
            galleryLoaded = true;
            listHolder.css("opacity", "1");
        });

[TrangVo]

@liabru
I have a list item "LI" in other file, then i use ajax to load and add them into a list "UL" have had matchHeight applied. In .done() function, i use this command: $.fn.matchHeight._apply(elements, options)

// the original group of .item
$('.itemList').matchHeight();

// make some ajax call
$.get('/api/something').done(function() {
// new item added, but this is not in the original group
$('.itemList').append(data);

// to avoid the automatic update functionality
$.fn.matchHeight._apply('.itemList');

})

[liabru]

@TrangVo are you applying to the li elements or the ul element? As it appears you might be applying it to the ul container, rather than the actual li items as you need to. Otherwise I need to see your exact code including html to help more.

[TrangVo]

@liabru
I applied for li element, but code had just an example, and I mistook about _appy function. I fixed it by your way, it ok. Thank you.

[liabru]

Great, no problem!

[hippocodes]

Hi,
I am not having any luck with the following code. I am using a jQuery load more button to load new items (.suitec11-item), but the newly added items are not resizing. The live page is: http://chameleonmethod.com/suite-c11

// MANUALLY CALL MATCHHEIGHT ON SUITEC11 ITEMS jQuery(document).ready(function(){ jQuery('.suitec11-mh').matchHeight(); }); // LOAD MORE POSTS jQuery(document).ready(function(){ jQuery('.load_more a').live('click', function(e){ e.preventDefault(); var link = jQuery(this).attr('href'); jQuery('.load_more').html('<span class="loader">Loading More Posts...</span>'); jQuery.get(link, function(data) { var post = jQuery("#suitec11-sec-two .suitec11-item-wrap", data); jQuery('#suitec11-sec-two .container .row').append(post); }); // remove matchHeight on items, which includes the new element jQuery('.suitec11-mh').matchHeight({ remove: true }); // apply matchHeight on the new selection, which includes the new element jQuery('.suitec11-mh').matchHeight(); jQuery('.load_more').load(link+' .load_more a'); }); });

Any help is much appreciated!