javascriptjquerytwitter-bootstrapmixitup

MixItUp issue with Bootstrap Tabs


I am attemtping to use MixitUp with bootstrap tabs, now I have read a few things but it has not resolved the issue.

This also does not resolve the issue

I have been able to reproduce the issue in codepen with minimal code. http://codepen.io/anon/pen/aNWwZL

The issue is that when applying filters in different tabs, they stop working.

Repro:

  1. Apply filter in Tab 1
  2. Apply filter in Tab 2
  3. Try and apply filter in Tab 1 again

On the 3rd step the filters no longer work.

I've been trying to solve this for a few days now and I'm stuck. Here is some of the code that handles switching between tabs:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr('href');
    if (target === "#TvShowTab") {
      if (!$('#tvList').mixItUp('isLoaded')) {
        $('#tvList').mixItUp();
      }
    }
    if (target === "#MoviesTab") {
      if (!$('#movieList').mixItUp('isLoaded')) {
            $('#movieList').mixItUp();
      }
    }
});

Solution

  • I have been able to resolve this issue by making sure to call mixItUp('destroy') when the tabs were pressed.

    if (target === "#TvShowTab") {
      if ($('#movieList').mixItUp('isLoaded'))
      {       
        $('#movieList').mixItUp('destroy');  
      }      
      if (!$('#tvList').mixItUp('isLoaded')) {
        $('#tvList').mixItUp();        
      }
    }
    

    If you want your filters to persist across tabs you can use the mixItUp('getState') before you run the destroy api. Here's what it looks like with that added.

    $(function() {
    $('#movieList').mixItUp();
    
    
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        var target = $(e.target).attr('href');
        var activeState = ''
        if (target === "#TvShowTab") {
            if ($('#movieList').mixItUp('isLoaded')) {
                activeState = $('#movieList').mixItUp('getState');
                $('#movieList').mixItUp('destroy');
            }
            if (!$('#tvList').mixItUp('isLoaded')) {
                $('#tvList').mixItUp({
                    load: {
                        filter: activeState.activeFilter || 'all',
                        sort: activeState.activeSort || 'default:asc'
                    }
                });
            }
        }
        if (target === "#MoviesTab") {
            if ($('#tvList').mixItUp('isLoaded')) {
                activeState = $('#tvList').mixItUp('getState');
                $('#tvList').mixItUp('destroy');
            }
            if (!$('#movieList').mixItUp('isLoaded')) {
                $('#movieList').mixItUp({
                    load: {
                        filter: activeState.activeFilter || 'all',
                        sort: activeState.activeSort || 'default:asc'
                    }
                });
            }
        }
    });
    });