2016-03-23 13 views
2

Ich versuche MixitUp mit Bootstrap-Tabs zu verwenden, jetzt habe ich ein paar things gelesen, aber es hat das Problem nicht gelöst.MixItUp Problem mit Bootstrap Tabs

This löst auch nicht das Problem

Ich habe das Problem in codepen mit minimalem Code reproduzieren kann.

Das Problem ist, dass wenn Sie Filter in verschiedenen Registerkarten anwenden, sie aufhören zu arbeiten

Repro:

  1. Filter anwenden in Tab 1
  2. Filter anwenden in Tab 2
  3. Versuchen und anwenden Filter in Tab 1 wieder

Am 3. Schritt nicht die Filter mehr Arbeit.

Ich habe versucht, dies für ein paar Tage jetzt zu lösen, und ich bin fest. Hier ist ein Teil des Codes, der zwischen den Tabs Griffe Schalt:

$('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(); 
     } 
    } 
}); 
+0

Ich denke, dass es mit der Tatsache verwandt ist, dass versteckte '.tab-Scheibe' 'Anzeige' auf' none' gesetzt hat. Ich habe CSS am Ende geändert: http://codepen.io/makshh/pen/BKRdYZ – makshh

+0

@makshh Das funktioniert, aber warum wird der Inhalt von der zweiten Registerkarte gedrückt? Gibt es das überhaupt, um das zu verhindern? –

+0

Die Lösung für @makshh hörte schließlich auf für mich zu arbeiten. Ich konnte das umgehen, indem ich sicher war, dass ich MixItUp ('destroy') anrief, wenn die Tabs gedrückt wurden. http://codepen.io/shiitake/pen/oxWeaj – shiitake

Antwort

1

ich in der Lage gewesen, um dieses Problem zu beheben, indem sichergestellt wird mixItUp nennen (‚zerstören‘), wenn die Laschen gedrückt wurden.

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

Wenn Sie Ihre Filter über Registerkarten bestehen bleiben Sie mixItUp verwenden können (‚getState‘), bevor Sie die api zerstören laufen. So sieht es aus, wenn es hinzugefügt wird.