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:
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();
}
}
});
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'
}
});
}
}
});
});