3. trouble with pushPage();

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.

trouble with pushPage();

  • 1

    Hi, I am having trouble with pushPage();, see: https://jsfiddle.net/w8904ztc/14/

    If you click the + button you should be able to see a new page with back button, but it doesn’t work.

    0

  • @123php, you need to wrap your first page with <ons-navigator> which you are missing yet referencing in your code!

    Here is a jsFiddle https://jsfiddle.net/w8904ztc/15/

    <ons-navigator id="myNavigator">
     <ons-page>
		<ons-toolbar>
			<div class="right"><ons-toolbar-button onclick="document.querySelector('#myNavigator').pushPage('thread.html', {data: {title: 'Neuer Post'}});">
          <ons-icon style="color:black;" icon="ion-plus"></ons-icon>
        </ons-toolbar-button></div>
			<div class="center">Echo</div>
		</ons-toolbar>

		<ons-tabbar swipeable position="auto">
			<ons-tab page="tab1.html" label="Home" icon="ion-home, material:md-home" active>
			</ons-tab>
			<ons-tab page="tab2.html" label="Einstellungen" icon="md-settings">
			</ons-tab>
		</ons-tabbar>
	</ons-page>
</ons-navigator>	

    <template id="tab1.html">
		<ons-page id="Tab1">
			<ons-pull-hook id="pull-hook">
			    Nach unten ziehen um neu zu laden
			  </ons-pull-hook>
				<div id="content"></div>
				<div id="threads"></div>
		</ons-page>
	</template>

	<template id="tab2.html">
		<ons-page id="Tab2">
			<p style="text-align: center;" id="usernamediv"></p>
			<p style="text-align: center;">
				<ons-button id="logout" name="logout" onclick="logout();">Logout</ons-button>
			</p>
		</ons-page>
	</template>

	<template id="thread.html">
		<ons-page id="NewPost">
        <p>
           Page got pushed
        </p>
		</ons-page>
	</template>
    3