ons-tabbar tabs problem on destroy

quince

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

anderson

Hi! Can you show your code?

quince

@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

quince

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…

anderson

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>

Fran Diox

@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.

quince

@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

quince

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

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.

ons-tabbar tabs problem on destroy