I have tried buttons and lists, but for whatever reason, I cannot push a page to the navigator stack from within a tab. Having said that, I am new to Onsen and could easily be messing something up. I have followed the examples and they work fine when just doing a tab nav or just doing a navigator, but not both. This question was similar but did not solve my issue: Onsen UI Pagination: navigator and tabbar
The below code doesn't work. Any help is greatly appreciated! The login.html page is in the root www folder and I am using Monaca cloud IDE.
<body>
<ons-tabbar position="bottom">
<ons-tab page="home.html" active="true">
<ons-icon icon="fa-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="gameon.html">
<ons-icon icon="fa-bullseye"></ons-icon>
<span style="font-size: 14px">Game On!</span>
</ons-tab>
<ons-tab page="progress.html">
<ons-icon icon="fa-line-chart"></ons-icon>
<span style="font-size: 14px">Progress</span>
</ons-tab>
<ons-tab page="settings.html">
<ons-icon icon="fa-gear"></ons-icon>
<span style="font-size: 14px">Settings</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
...
</ons-template>
<ons-template id="gameon.html">
...
</ons-template>
<ons-template id="progress.html">
...
</ons-template>
<ons-template id="settings.html">
<ons-navigator var="navigator">
<ons-page>
<ons-toolbar>
<div class="center">Settings</div>
</ons-toolbar>
<ons-button modifier="large" onclick="navigator.pushPage("login.html", { animation: "slide" });">Login</ons-button>
<ons-list>
<ons-list-item onclick="navigator.pushPage('login.html');" modifier="chevron">Login</ons-list-item>
<ons-list-item>
Another Option
<ons-switch modifier="list-item" checked></ons-switch>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</ons-template>
Update: So after reviewing the docs for Onsen 2.0, I discover that for ons-navigator, the var attribute is for angular which I am specifically trying to avoid using as I want to keep the overhead as minimal as possible and just stick with straight JS (no frameworks). So the docs here https://onsen.io/2/reference/ons-navigator.html leave me confused as there is no way to reference the object without var. Thus it would seem, that if you are going to use the navigator then you must be using AngularJS which contradicts the JS reference page of the same docs which indicates that it doesn't require Angular and just the Onsen loader.js. Is this correct or am I losing my marbles?
Update 2: So after implementing the change below and it still not working, ran it on my phone and finally got an error message. I even reverted back to the original code and get the same error, which is:
Uncaught (in promise) Error: "html" must be one wrapper element. www/lib/onsenui/js/onsenui.js: 4139
My guess is that this has to do with using and calling to an external page as well. I will try pulling everything out to standalone html pages and just call the templates themselves. Who knows???
I found the issue. On the login.html page, I had the <style> block outside the <ons-page> tags. From the JS referenced in the error message, I was able to determine that there were multiple HTML wrappers being incited. Luckily, a quick fix for a stupid question on my part!