Monaca Onsen UI Discord Chat Github Repo

Dynamically create tabbar in page of navigator



  • Hello,
    i am trying to generate tabbar on page, based on some data from API.

    So I created this:

        let data = [];
        let onsEle = document.createElement('ons-tab');
        onsEle.setAttribute('id', 'rdMainTab');
        onsEle.setAttribute('page', 'rdMain.html');
        onsEle.setAttribute('label', 'Main');
        onsEle.setAttribute('icon', 'ion-home, material:md-home');
        onsEle.setAttribute('active', '');
    
        data.push(onsEle);
    
        if (showData1) {
          let onsMapEle = document.createElement('ons-tab');
          onsMapEle.setAttribute('id', 'rdMapTab');
          onsMapEle.setAttribute('page', 'rdDetailMap.html');
          onsMapEle.setAttribute('label', 'Map');
          onsMapEle.setAttribute('icon', 'ion-home, material:md-home');
          data.push(onsMapEle);
        }
    
        if (showData2) {
          let onsInvEle = document.createElement('ons-tab');
          onsInvEle.setAttribute('id', 'rdInvoiceTab');
          onsInvEle.setAttribute('page', 'rdInvoiceTab.html');
          onsInvEle.setAttribute('label', 'Invoice');
          onsInvEle.setAttribute('icon', 'ion-home, material:md-home');
          data.push(onsInvEle);
        }
    
        if (showData3) {
          let onsTriEle = document.createElement('ons-tab');
          onsTriEle.setAttribute('id', 'rdTripsTab');
          onsTriEle.setAttribute('page', 'rdTripsTab.html');
          onsTriEle.setAttribute('label', 'Trips');
          onsTriEle.setAttribute('icon', 'ion-home, material:md-home');
          data.push(onsTriEle);
        }
    
        let wrap = document.createElement('ons-tabbar');
        wrap.setAttribute('swipeable', '');
        wrap.setAttribute('position', 'auto');
        wrap.setAttribute('id', 'reservation-detail-tabbar');
        wrap.setAttribute('class', 'x-margin-top');
    
        let l = data.length;
        for (let a = 0; a < l; a++) {
          wrap.appendChild(data[a]);
        }
    
        $page.find('#tabbarPlaceholder')[0].appendChild(wrap);
    

    The tabbar renders ok. But, when I click at another tab it is showing this error:

    Uncaught (in promise) TypeError: page._show is not a function
        at HTMLElement._onPostChange (index.js:264)
        at swiper.js:343
    

    And when I try to go back it is showing this:

    index.js:281 Uncaught (in promise) TypeError: prevTab.pageElement._hide is not a function
        at HTMLElement._onPreChange (index.js:281)
        at Swiper._changeTo (swiper.js:335)
        at Swiper.setActiveIndex (swiper.js:183)
        at index.js:459
    

    Can you please tell me how to generate tabbar dynamicaly? Or where I made mistake? Many thanks and have a nice day.


  • administrators

    Can you please reproduce the problem in the playground? https://onsen.io/playground/



  • Hello,
    so this is something that may be result https://codepen.io/symorp/pen/bGbWEeW but I wanna pages in tab bar create dynamically by some conditions. Currently, I am using jQuery but in the future, we wanna migrate to Vue so is here a way how to render tabs in tab bar with jQuery or Vue?