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?
-
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>
-
@anderson That’s interesting,
ons-page
creates a<div class="content">
internally if it’s not provided andons-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.
-
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:7847i 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