3. How to add <ons-tab> dynamicaly with javascript

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to add <ons-tab> dynamicaly with javascript

  • J

    I try to customise the <ons-tab> depending on json string. For example if you are admin, you have an additional admin tab.
    So I have a json string and I try to create <ons-tab> element based on the json field.
    I don’t know how to set it properly because when use “$(’#tabbar1’).append” command tabs seems not properly set.

    You can try this code:

    <!DOCTYPE HTML>
  <html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script type="text/javascript" src="components/loader.js"></script>
    
    <script type="text/javascript" src="components/monaca-jquery/jquery.js"></script>
    
    <script type="text/javascript" src="components/monaca-onsenui/js/onsenui.js"></script>
    <link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
    <link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">

    <script type="text/javascript">    
    
    function getmyjson() {  
        var payload = '{"data":[{"id":"1","title":"ONE"},{"id":"2","title":"TWO"}]}';
        jsondata = JSON.parse(payload);

        $.each(jsondata.data, function(i,item){               
            $('#tabbar1').append('<ons-tab page="#" label="' +  item.title + '" icon="md-settings" active-icon="md-face"></ons-tab>');               
        });
    }   
 

    $(document).ready(function() {
        getmyjson();
    });
    
    </script>
  </head>
  <body>

    <ons-page>    
      <ons-tabbar swipeable position="auto" id="tabbar1">
        <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" active></ons-tab> 
        <ons-tab page="#" label="ZERO" icon="md-settings" active-icon="md-face"></ons-tab>
      </ons-tabbar>
    </ons-page>
            
    <template id="tab1.html">
      <ons-page id="Tab1">
      </ons-page>
    </template>
   
  </body>
  </html>

    You will see something unexpected where tabs are not in the “tabbar1” element.
    0_1515362237508_ons-tab-issue.png

    0 1 Reply
  • Onsen UI

    @joyeux86 This use case is not officially supported so there is no nice API for it. However, I think you can make it work easily. You need to know that ons-tabbar element is compiled at some point and its inner HTML structure is changed. You don’t want to attach the new tab to ons-tabbar but to the child that contains .tabbar class ('#tabbar1 .tabbar' in your example I guess). Also, do not attach the tabbar as the last child (appendChild), but to the second last. Something like tabbar.insertBefore(tab, tabbar.lastChild) should work (or its equivalent in jQuery).

    0