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.

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', '');
        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');
        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');
        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');
        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++) {

    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?

  • Hello,
    so this is something that may be result 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?