How to navigate within pages

amco

Hello Everyone,
I am new to Onsen but i have been trying to get myself on the track for a few days now but i have been hooked down by one annoying problem PLEASE HELP ME!! I was able to navigate using tabbar but i do not know how to navigate within one page for example if i click on a Get Started button it should take me to the next page.

mjessen

You need an ons-navigator element to implement a stack navigation to your app. You can find an example in the documentation ons-navigator

In most of my apps i use a tabbar as main navigation and the stack navigation to push/pop sub-pages. To do so i set the ons-navigator element in my index and use the tabbar as page:

 <ons-navigator id="navigator" page="tabbar.html"></ons-navigator>

Now you can use a querySelector to access the navigator and handle your stack management. Here is an example of pushing a page to your stack:

document.querySelector('#navigator').pushPage('yoursubpage.html', {data: {title: 'subpage Title', content: 'subpage content'}});

In the documentation is shown how you can set an “init”-eventListener to get the pushed data. In my example the “title” and the “content” i want to set on the page. Hope this helps…

amco

Hi,
Thank very much it helps @mjessen i was able to implement it and it worked but there is one issue again… After pushing to sub-pages the tabbar disappeared the tabbar appears at the landing page alone… Dunno know maybe i am doing something wrong… Please i want the tabbar to show on all pages. both main pages and subpages…

Thank you so much in advance…

mjessen

You can handle the tabbar visibility with the following code

document.querySelector('#yourTabbarId').setTabbarVisibility(true)

Maybe it is better to this inside the prepush-Event and not inside the init

Fran Diox

@amco If you want to keep the tabbar, you have to include your ons-navigator as a child of the tabbar, not as a parent. Therefore, put it in the tabbar page where you want the navigation. You can have several navigators if necessary, one on each tabbar page

amco

@Fran-Diox i actually declare ons-navigator as the layout like this

<ons-navigator id=“myNavigator” page=“tabbar.html”></ons-navigator>

I now have a template tag with the id tabbar.html that is extending my tabbar in the ons-navigator like this

      <ons-tab page="LogBook.html" label="Log Book" icon="ion-ios-book">
      </ons-tab>
      
      <ons-tab page="LogBook.html" label="Find" icon="ion-ios-search-strong">
      </ons-tab>

      <ons-tab page="LogBook.html" label="Support" icon="ion-person-stalker">
      </ons-tab>

      <ons-tab page="LogBook.html" label="More" icon="ion-more">
      </ons-tab>
    </ons-tabbar>
  </ons-page>
</template>

How can i make th ons-navigator the child of tabbar. Please can you explain more looking at my code above. Thanks in advance

Fran Diox

@amco Just move your tabbar to index.html (without <template> tag) and place a navigator in every ons-tab's page where you need navigation. Quick example here. This pattern is normally used without sliding animations but that’s up to you.

amco

@Fran-Diox Yeah!!! Is working fine now. The tabbar is showing on all the pages i need them to sho Thank you very much i really appreciate. Being able to fix that i am having another issue now on my next page… Dunno maybe you can help with this as well

I have a design with Select Input, so what i want to do is after i select any option at of the options i should now click on next button to take me to next page base on what i select… Dunno maybe you understand if yes is there any suggestion for me? Thanks.

Fran Diox

@amco Not sure where exactly you have the issue. You can just read the select value on button click and then myNavigator.pushPage('nextPage', { data: { selectValue: ... } }).

amco

@Fran-Diox thanks for getting back to me ASAP. I searched all through the internet maybe i can see something to read as you mentioned ( You can just read the select value on button click ) but i found nothing yet.

Here is my problem again… I have SELECT tag with 3 options and a button called NEXT. So what i want to do is that when i select any option and i clicked on NEXT button it should go to another page. Thanks

Fran Diox

@amco So can’t you do something like this?

function buttonClick() {
  document.querySelector('ons-navigator')
    .pushPage('nextPage', {
      data: {
        value: document.querySelector('ons-select').value
      }
    });
}

Actually, the page with the ons-select remains in the DOM so you can even access it with document.querySelector when you are in the next page already…

amco

@Fran-Diox ons-back-button isn’t working inside ons-navigator? Any idea?

amco

@mjessen I know this topic is quite old but i just feel like explaining this part the more…

You will have to first set navigator inside your index file like this… <ons-navigator id=“navigator” page=“tabbar.html”></ons-navigator>

You will now create a query selector inside your script tag just like this… document.querySelector(’#navigator’).pushPage(‘yoursubpage.html’, {data: {title: ‘subpage Title’, content: ‘subpage content’}});

You will now go to your href and add the name of the file just like this… yoursubpage.html

I hope this helps anybody in need of it