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.

How to navigate within pages



  • 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


  • Onsen UI

    @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



  • @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

    <template id=“tabbar.html”>
    <ons-page id=“tabbar-page”>
    <ons-tabbar position=“bottom”>
    <ons-tab page=“home.html” label=“Home” icon=“ion-home” active></ons-tab>

          <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


  • Onsen UI

    @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.



  • @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.


  • Onsen UI

    @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: ... } }).



  • @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


  • Onsen UI

    @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…



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



  • @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