MixItUp, Rails and Turbolinks

While developing a new site, I noticed that the MixItUp plugin I was using was having issues with Turbolinks. As you might be aware of, jQuery and Turbolinks tend to have some issues when it comes to loading on pages that use turbolinks.

The first though I had was to use jquery.turbolinks which usually solved a majority of my jQuery + Turbolinks issue — however this wasn’t the case with MixItUp. After doing a bit of research, I came across an issue that was posted on the MixItUp github issues, which clearly outlined the resolution. In a nutshell, you’ll basically need to destroy the instance that was created from the first mixitup call, and recall it on a ‘page:load’.

<script>
$(function(){ // on first doc ready we instantiate mixitup
    $('#container').mixItUp(); // an instance now exists in the session memory
});
$(window).on('page:before-change', function(){ 
    $('#container').mixItUp('destroy'); // destroy the instance
});
$(window).on('page:load', function(){
    $('#container').mixItUp(); // We can now reinstantiate without being blocked
});
</script>

You can read more about it here.