CODEWITHSUNDEEP
javascriptjqueryhtmlcssmaterialize
Coffee
Coffee

Reputation: 2233

materialize tabs dont work when loaded into a modal

So I have project with Materialize CSS, in my html I have button that triggers modal, and some data, including scripts with tabs, should be loaded in this modal.

My code looks like this:

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

The view loaded into the modal was the same as the one given as an example on materialize website:

  <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>

But it does not work, all tab contents are showing at the same time, one after another. I've tried setting timeout and changing get() link from controller action into the direct one, but it didn't work. Loading tabs into the static element of the page (into the 'body', for example) makes everything work, but I need these tabs to be inside the modal. What could be the problem and how could I possibly solve it?

Would highly appreciate any possible help.

Upvotes: 1

Views: 1226

Answers (2)

ashwini
ashwini

Reputation: 375

Simply add following code in script:

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

Upvotes: 1

Coffee
Coffee

Reputation: 2233

Well I simply added id to all this stuff: changed $('.modal-content').html(data); to $('#modalbox').children('.modal-content').html(data); and it solved my problem

Upvotes: 1

Related Questions