Call a function when tab selected in material desi

Question

I have three tabs on the page.

<!-- Tabs -->
<div class="mdl-layout__tab-bar">
  <a href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>
  <a href="#plots-data-tab" class="mdl-layout__tab">Plots data</a>
  <a href="#report-tab" class="mdl-layout__tab">Report</a>
</div>

I need to re-draw plots when Plots tab is selected. I've tried to onclick="redraw_plots();" to the Plots tab, but function is called too fast before tab is activated. Any way to get an event when this tab activates?

Thank you.

Answer 1

It's happen because element inline event are the first event to be executed.

To Execute after MDL tab event you can do like this:

With Javascript Vanilla:

First add an id on link

<a id="#plots-tab" href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>

Second add an event listener

document.getElementById("#plots-tab").addEventListener("click", function(){
   redraw(); 
});

Or with Jquery:

Add on event listener on element

$('a[href="#plots-tab"]').on('click',function(){
   redraw();        
});

Answer 2

For me it was not enough to hook to the click event. A timeout of at least 0 milliseconds was necessary otherwise the content display it will still be set to none (tested on Chrome) and any drawing of your own that requires width calculations might fail. Check the attached snippet and verify that without setTimeout, on the click event the tab content display is set to none and not 'block'. MDL must play an animation for smooth transition that cause absolute position drawing issues.

$('.mdl-layout__tab-bar').children().each(function(){
  
  $(this).on('click', function(){
    var timeout = 0;
    var targetContent = this.getAttribute('href');
    
    setTimeout(function(){
      if($(targetContent).css('display') == "block"){
         console.info("tab content is now visible after a timeout of %s millisenconds", timeout);
      }
      else{
      console.warn("increase timeout to make sure that content is visible");
      }
    }, timeout);
    
   
  });
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
      <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
      <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
      <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
  </div>
  <main class="mdl-layout__content">
    <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
      <div class="page-content">
        Tab 1
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-2">
      <div class="page-content">
      Tab 2
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-3">
      <div class="page-content">
      Tab 3
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-4">
      <div class="page-content">
      Tab 4
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-5">
      <div class="page-content">
      Tab 5
      </div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-6">
      <div class="page-content">
      Tab 6
      </div>
    </section>
  </main>
</div>