ons-tabbar using external pages

NickSell

I am experiencing an issue with my <ons-tabbar> implementation. This seems to have occurred since I am upgrading from 2.2.6 to the latest distribution of 2.4.2. The problem I’m having is this:

I have a ‘root’ html file which contains an ons-tabbar element listing three pages as ons-tabs. The pages the tabs are referencing are external pages (their own html files) in the same directory. I have not wanted to use templates in this particular project as the pages are reasonably large and it would be nightmare to maintain if they were merged into one file.

Root.html:

<body>
	<ons-page ng-controller="RootController">
		<ons-tabbar var="tabbar">
			<ons-tab page="page1" icon="fa-search" label="Tab1" active>
			</ons-tab>
			<ons-tab page="page2" icon="fa-diamond" label="Tab2">
			</ons-tab>
			<ons-tab page="page3" icon="fa-users" label="Tab3">
			</ons-tab>
		</ons-tabbar>
      </ons-page>
</body>

Page1.html:

<body>
	<ons-page ng-controller="PageOneController">
             <p>Page 1</p>
        </ons-page>
</body

Page2.html:

<body>
	<ons-page ng-controller="PageTwoController">
             <p>Page 2</p>
        </ons-page>
</body

Page3.html:

<body>
	<ons-page ng-controller="PageThreeController">
             <p>Page 3</p>
        </ons-page>
</body

All of the angular and scripts are loaded in the Root’s <head> section and the individual pages do not perform their own scripts. No errors are displayed on my console and the tab screens is just blank!?

0_1498037775722_Screen Shot 2017-06-21 at 10.34.44.png

I have tried all sorts of things to get the pages to display, I have stripped back all of the functionality and simply put test text (as above) and it still doesn’t display.

I thought it may be something to do with the following statement in the breaking changes of 2.3.0: “ons-template, external files: ons-page tag is not added automatically anymore as a wrapper of the target template. It must be manually specified.” but I’m not really sure what that means…

Have you guys got any suggestions to get correct this issue? Thanks in advance.

Nick

Fran Diox

@NickSell Try removing <body> tags from your files. Files and templates are the same, they should only contain one single root node ons-page. Looks like that statement was fixing your issue because a new ons-page was added as a wrapper automatically.

NickSell

@Fran-Diox thanks for looking at this!! I have done as you have suggested and success! (well kind of) The first tab page is being displayed correctly and my angular implementation runs as expected… Unfortunately, a mistake in my previous post was omitting the added complication of an “ons-navigator” embedded on the first page. Now that the page is being displayed, all is as expected - until I click on another tab. When trying to change to another tab I get the following message in my console:

0_1498158621594_Screen Shot 2017-06-22 at 20.09.03.png
The Root page has the following structure:

<body>
	<ons-template id="discover_navigator">
		<ons-navigator var="discover-navigator" page="page1.html">
		</ons-navigator>
	</ons-template>
	<ons-page ng-controller="RootController">
		<ons-tabbar var="tabbar">
			<ons-tab page="discover_navigator" icon="fa-search" label="Discover" active>
			</ons-tab>
			<ons-tab page="glints" icon="fa-diamond" label="Glints">
			</ons-tab>
			<ons-tab page="account" icon="fa-users" label="Your Account">
			</ons-tab>
		</ons-tabbar>
</body>

The tab pages have the following structure (as per your suggestion):
Page1.html:

<ons-page ng-controller="PageOneController">
    <p>Page 1</p>
</ons-page>

Page2.html:

<ons-page ng-controller="PageTwoController">
    <p>Page 2</p>
</ons-page>

Page3.html:

<ons-page ng-controller="PageThreeController">
    <p>Page 3</p>
</ons-page>

All seems fine when I set the 2nd and 3rd pages as the ‘active’ tab (to be loaded first). I don’t get the issue, but if at all I open the first tab (which uses a navigator). I get the error when tapping the others. Have you any idea why this is happening. Thanks very much for your support so far it is much appreciated.

NickSell

@NickSell Sorry, a silly copy and paste error in my reply above. The Root page does have a closing “ons-page” tag. The code does read as follows in my implementation:

<body>
    <ons-template id="discover_navigator">
        <ons-navigator var="discover-navigator" page="page1.html">
        </ons-navigator>
    </ons-template>
    <ons-page ng-controller="RootController">
        <ons-tabbar var="tabbar">
            <ons-tab page="discover_navigator" icon="fa-search" label="Discover" active>
            </ons-tab>
            <ons-tab page="glints" icon="fa-diamond" label="Glints">
            </ons-tab>
            <ons-tab page="account" icon="fa-users" label="Your Account">
            </ons-tab>
        </ons-tabbar>
   </ons-page>
</body>

NickSell

Unfortunately I still have this issue, has anyone else experienced this? A lot of the help resources online reference old implementations of Onsen, so I’m pretty sure I’ve tried everything I can think of :(

Fran Diox

@NickSell Hey! As I said, templates must have a single ons-page as the root. Your ons-template has a navigator so wrap it inside a page and try again.

NickSell

@Fran-Diox Thanks so much!! That did the trick :+1:
Silly me, didn’t quite take your advice did I!
All sorted now, much appreciated

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 using external pages