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