Using jquery.matchHeight.js with Etsy Demo.

So I've added jquery.matchHeight.js to my project so that all listings have equal height containers. I've added it under Vendor JavaScripts and it is working. Currently, when I load my project for the first time, the containers are all equal heights but when I navigate to another page and return to the listings page it no longer works and my containers are once again varying heights. I can only get it to work again by refreshing the page. What can I do to ensure this functionality works consistently every time?

Posted about 4 years ago by Javier Cortez
Posted about 4 years ago by Alex Yang

You're probably seeing this behavior because of turbolinks. Turbolinks is a gem that gets installed by default on any new Rails app, and it's designed to make your app faster by only loading the content on the page that gets changed. The downside of this is that it can force you to have to refresh the page to get things like JavaScript code to work. There are a couple approaches to dealing with this. For example, you could disable turbolinks for any links to the pages requiring matchHeight (we explain how to do this in our Etsydemo course, in this video: https://baserails.com/courses/etsydemo/verify-credit-card-data).

Alternatively, you could disable turbolinks completely. You can read more about that here:
http://blog.flightswithfriends.com/post/53943440505/how-to-disable-turbolinks-in-rails-4

Hope this helps!

1
Posted about 4 years ago by Jeremy Molayem

Woah. thanks for this. I had the same issue with Facebook plugins. You may want to include this in any facebook plugin tutorial.

1
Posted about 4 years ago by Javier Cortez

That make sense, thanks for the insight. I'll experiment with the two solutions you provided and see which works best. Thanks again Alex.

1