Onsen2: how to receive events from ons-tabbbar?



  • Hi,

    I’m trying to react on events fired from ons-tabbar. But I don’t get events . Tried several methods and googled but didn’t find an answer .

    That’s the tabbar:

      <ons-tabbar id="app_tab_bar">
          <ons-tab icon="ion-speedometer" page="tab_time_tracking.html" active></ons-tab>
          <ons-tab icon="ion-stats-bars" page="tab_scanning.html"></ons-tab>
          <ons-tab icon="ion-ios-timer" page="tab_fpvsports.html"></ons-tab>
          <ons-tab icon="ion-gear-b" page="tab_settings.html"></ons-tab>
          <ons-tab icon="ion-help" page="tab_help.html"></ons-tab>
        </ons-tabbar>
    

    And here’s the code:

    ons.ready(function() {
        
        document.getElementById('app_tab_bar').on("postchange",function(event){
            console.log("tab change");
        });
        
        document.getElementById('refresh_device_list').onAction = function(done) {
            setTimeout(done, 250);
            startBLEScanning();
        };
      
        console.log("ready");
        
    });
    

    So, what am I doing wrong?

    Regards, Alex


  • Onsen UI

    @polyvision Are you using jQuery or something? In plain JavaScript you should use addEventListener.

    ons.ready(function() {
      document.querySelector('ons-tabbar')
        .addEventListener('postchange', function() {
          console.log('hi there');
        });
    });
    

    You can add the listener to the document as well: document.addEventListener('postchange', ...);


Log in to reply