Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

matchHeight after Ajax call #132

Closed
vmail79 opened this issue Oct 17, 2016 · 7 comments
Closed

matchHeight after Ajax call #132

vmail79 opened this issue Oct 17, 2016 · 7 comments
Labels

Comments

@vmail79
Copy link

vmail79 commented Oct 17, 2016

Hi,

I am a little new to jQuery, so apologies if this doesn't make sense!

We are using an Ajax Layered Nav plugin to dynamically filter products in a WooCommerce project. Initially the shop items have matchHeight applied to them (works like a charm!), but after the Ajax call (no matter what we've tried!), we just can "access" the new content to re-apply the heights function.

Currently we have been able to "hook into" the ajax function, and get things to happen (outside of the newly generated content) once it's done, but nothing we've tried has any effect on the new content.

The code we're using (in our custom theme .js) is as follows:

jQuery( "body" ).on( "aln_reloaded", function() {
    console.log("aln_reloaded done"); // works

    jQuery("#products").css({ backgroundColor: "red" }); // for testing - div just outside Ajax content - works

    jQuery(".products").css({ backgroundColor: "blue" }); // for testing - div just inside Ajax content - doesn't work

    jQuery.fn.matchHeight._update(); // doesn't work

    // Tried removing and then re-applying as per another post on the issue we read - doesn't work
    jQuery('.pw-item').matchHeight({ remove: true });
    jQuery('.pw-item').matchHeight(true);

});

Any help/advice/suggestions would be MUCH appreciated - thank you!

@DavidBruchmann
Copy link

DavidBruchmann commented Oct 17, 2016

you,ve to write the ajax content first in a hidden div and per JS you can write it anywhere in the document. Then match height update should work,

@vmail79
Copy link
Author

vmail79 commented Oct 18, 2016

Hi David, thanks for your prompt reply :-) as the ajax content is being written in by a third-party script, I am not sure how much control we have over how/where it gets called in - I will certainly have a look, though - thanks again!

@liabru
Copy link
Owner

liabru commented Oct 19, 2016

Are you saying that even though aln_reloaded is fired, the third-party script may not have fully written into the DOM? Sounds like a problem with the library (log an issue with them or monkey patch it somehow).

A quick common trick is to use a timeout with a small value or even 0 and then updating matchHeight, or if you're on the bleeding edge maybe look at MutationObserver.

@vmail79
Copy link
Author

vmail79 commented Oct 19, 2016

Hi Liam, thanks for your response :-)

Unfortunately due to time constraints we've had to abandon the ajax plugin for the moment. I might try tackle it again if there is time at the end of the project, so thanks for your suggestions!

@liabru
Copy link
Owner

liabru commented Oct 19, 2016

Sure, thanks for the update.

@liabru liabru closed this as completed Oct 19, 2016
@rantsboy
Copy link

Have ou found solution? I have same problem matchHeight not working after ajax layered navigation usage (need to refresh age after that)

@henjak
Copy link

henjak commented Sep 6, 2018

@rantsboy : You can try using ajaxSuccess - https://api.jquery.com/ajaxSuccess/. It worked for me.

$(document).ajaxSuccess(function(){
  $('.item').matchHeight();
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants