2016-05-24 10 views
1

So habe ich Projekt mit Materialise CSS, in meinem HTML habe ich Knopf, der modale auslöst, und einige Daten, einschließlich Skripten mit Tabs, sollten in diesem modal geladen werden.materialisieren Tabs funktionieren nicht, wenn in ein modales geladen

sieht Ihr Code wie folgt aus:

<div class="row"> 
    <div class="col s12"> 
     <ul class="tabs"> 
     <li class="tab col s3"><a href="#test1">Test 1</a></li> 
     <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li> 
     <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li> 
     <li class="tab col s3"><a href="#test4">Test 4</a></li> 
     </ul> 
    </div> 
    <div id="test1" class="col s12">Test 1</div> 
    <div id="test2" class="col s12">Test 2</div> 
    <div id="test3" class="col s12">Test 3</div> 
    <div id="test4" class="col s12">Test 4</div> 
    </div> 
    <script> 
    $(document).ready(function(){ 
     $('ul.tabs').tabs(); 
    }); 
    </script> 

Aber es funktioniert nicht,:

$('.modal-trigger').click(function() { 
     var id = $(this).data('id'); 
     animatedOpenModal($(this).attr('id'),'modalbox','open'); 
     $.get('{{action("Admin\[email protected]")}}'+'/'+id).success(function(data){ 
      $('.modal-content').html(data); 
     }); 
    }); 

Die in den modalen geladen Ansicht die gleiche wie die als Beispiel auf Materialise Website gegeben war Alle Registerkarteninhalte werden gleichzeitig nacheinander angezeigt. Ich habe versucht, Timeout und ändern get() Link von Controller-Aktion in die direkte, aber es hat nicht funktioniert. Das Laden von Tabs in das statische Element der Seite (z. B. in den "body") lässt alles funktionieren, aber ich brauche diese Tabs innerhalb des Modals. Was könnte das Problem sein und wie könnte ich es lösen?

Würde ich jede mögliche Hilfe sehr schätzen.

Antwort

1

Fügen Sie einfach folgenden Code in dem Skript:

$('.modal-trigger').leanModal({ 
    ready: function() { 
     $('ul.tabs').tabs(); 
    } 
}); 
1

Nun habe ich einfach hinzugefügt ID all dieses Zeug: geändert $('.modal-content').html(data);-$('#modalbox').children('.modal-content').html(data); und es mein Problem gelöst