2

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();
      }
    }
});
Community
  • 1
  • 1
Jamie Rees
  • 7,973
  • 2
  • 45
  • 83
  • I think it is related to the fact that hidden `.tab-pane` has `display` set to `none`. I changed CSS at the bottom: http://codepen.io/makshh/pen/BKRdYZ – max Mar 23 '16 at 15:56
  • @makshh That works, but why does the content from the 2nd tab get pushed down? Is there anyway to prevent that? – Jamie Rees Mar 23 '16 at 16:11
  • The solution for @makshh eventually stopped working for me. I was able to get around this by making sure to call mixItUp('destroy') when the tabs were pressed. http://codepen.io/shiitake/pen/oxWeaj – shiitake Mar 23 '16 at 16:16
  • Updated the Codepen, but this is hacky. – max Mar 23 '16 at 16:18

1 Answers1

1

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'
                }
            });
        }
    }
});
});
shiitake
  • 231
  • 2
  • 6