ons-tabbar tabs problem on destroy



  • I have app with couple pages, in one page there is ons-tabbar with 5 tabs. For app navigation i use ons-sliding-menu, i don’t have navigator. Everything works fine, no errors, no warnings, except when i navigate from page with tabbar to any other page, then i got **Uncaught TypeError: Cannot read property $destroy of undefined. **

    I think this issue does not have anything with my markups or code as this still happening when tab pages are empty, without anything and only when i navigate from page with tabbar.

    Is there a way to avoid this error, catch maybe or something?
    Thanks



  • Hi! Can you show your code?



  • @anderson

    Hi, here is markaups

            <ons-page>
               <ons-toolbar style="background-color:#000;">
                    <div class="left">
                        <ons-toolbar-button ng-click="app.menu.toggleMenu()">
                            <ons-icon icon="md-menu"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center toolbarText">Products</div>
              </ons-toolbar>
          
    
                <div class="content" style="text-align: center">
                    <ons-tabbar>
                        <ons-tab label="Products1" page="tab1.html" active></ons-tab>
                        <ons-tab label="Products2" page="tab2.html"></ons-tab>
                        <ons-tab label="Products3" page="tab3.html"></ons-tab>
                        <ons-tab label="Products4" page="tab4.html"></ons-tab>
                        <ons-tab page="tab5.html" icon="ion-ios-cart-outline"></ons-tab>
                    </ons-tabbar>
                </div>
            </ons-page>
        </ons-template>
    
    
    <ons-template id="tab1.html">
               <ons-page id="tab1">
               </ons-page>
    </ons-template>
    
    <ons-template id="tab2.html">
               <ons-page id="tab2">
               </ons-page>
    </ons-template>
    
    <ons-template id="tab3.html">
               <ons-page id="tab3">
               </ons-page>
    </ons-template>
    
    <ons-template id="tab4.html">
               <ons-page id="tab4">
               </ons-page>
    </ons-template>
    
    <ons-template id="tab5.html">
               <ons-page id="tab5">
               </ons-page>
    </ons-template>
    

    At first these tab pages (tab1.html…) was inside of products.html right under ons-tabbar closing mark, then i put them outside as separate pages

    by the way, what is proper way of using - inside a page after ons-tabbar or like in this code

    in both way, everything works the same, and i getting same error

    thanks



  • I forgot to mention, i’m getting 5 same error messages, one for each tab.

    And i found that similar problem exist in ionic and kendo Ui-es, someone says that is just debugging info, like there is no real error…



  • Hi quince,

    I have removed the “content” class from the div element (<div class = “content”>) and it works.
    Apparently the <ons-tabbar> element cannot be the child of a class element “content”.

    <!doctype html>
    <html lang="en">
    <head>
        <title>App</title>
        <meta charset="utf-8">
    
        <!-- ONSENUI v.2.1.0 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
    
    </head>
    <body>
        <ons-page>
            <ons-toolbar style="background-color:#000;">
                <div class="left">
                    <ons-toolbar-button ng-click="app.menu.toggleMenu()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
                </div>
                <div class="center toolbarText">Products</div>
            </ons-toolbar>
            <!--<div class="content" style="text-align: center">-->
            <div class="" style="text-align: center">
            <ons-tabbar>
                <ons-tab label="Products1" page="tab1.html" active></ons-tab>
                <ons-tab label="Products2" page="tab2.html"></ons-tab>
                <ons-tab label="Products3" page="tab3.html"></ons-tab>
                <ons-tab label="Products4" page="tab4.html"></ons-tab>
                <ons-tab page="tab5.html" icon="ion-ios-cart-outline"></ons-tab>
            </ons-tabbar>
            </div>
        </ons-page>
    
        <ons-template id="tab1.html">
            <ons-page id="tab1">
            TAB 1
            </ons-page>
        </ons-template>
    
        <ons-template id="tab2.html">
            <ons-page id="tab2">
            TAB 2
            </ons-page>
        </ons-template>
    
        <ons-template id="tab3.html">
            <ons-page id="tab3">
            TAB 3
            </ons-page>
        </ons-template>
    
        <ons-template id="tab4.html">
            <ons-page id="tab4">
            TAB 4
            </ons-page>
        </ons-template>
    
        <ons-template id="tab5.html">
            <ons-page id="tab5">
            TAB 5
            </ons-page>
        </ons-template>
    
    </body>
    </html>
    

  • Onsen UI

    @anderson That’s interesting, ons-page creates a <div class="content"> internally if it’s not provided and ons-tabbar must be inside. Not sure why it would be problematic to provide the div directly with the tabbar inside, I’ll try to check when I have some free time.



  • @anderson

    i tried but still the same. actually, i don’t have problem with tabs, they are working properly, its just i’m getting error on leaving page with tabs but even after error messages everything works fine.
    thanks



  • problem is @
    www/components/monaca-onsenui/js/angular-onsenui.js:7847

    i looked here

    and in www/components/monaca-onsenui/js/onsenui.js

    but i don’t have a clue, everything i see is that ‘The loadPage method has been deprecated and will be removed in the next minor version.’ and it looks to me that it might be a problem


Log in to reply