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-tab with a single template

  • I understand that the tabs in onsen 1 are actually different pages and you can’t share the data between tabs using document.getElementById.

    What I am trying to do is create a single form but split the data across multiple tabs to be organized logically. Is there another way to do this such that I can get all of the items across all tabs so i can submit it to my backend as a single request?

    I have tried using div’s and dynamically show and hide them however when we switch tabs we lose the originally content. Also tried no-reload and persist.

  • @jorm A couple of things.

    1. Did you use persistent? This should solve your issues.
    <ons-tab persistent>
    1. Have you thought about migrating to 2.0? It is light years ahead of 1.0.

  • Thanks for the reply. When using the persistent attribute the data is there once i visit the tab. However if the user doesnt visit all of the tabs the data is not guaranteed to be there. Is there a way to trigger the tabs or at least certain tabs to preload?

    I did try the following. But does not appear like there was enough time to trigger it to actually load. I can set the active tab but if i reset it back page 1 is still not loaded ahead of time.
    tabbar.addEventListener(‘ons-tabbar:init’, function(event) {
    var tabBar = event.component;


    I will look at upgrading to 2.0

  • @jorm I believe there is a way to pre load the tabs. I’m on my phone and will look on my laptop later tonight on how it can be done.

    Edit: So on the same link I posted, there is load page:

    Load page without changing the active tab

    If you want to only load a page but not to change the active tab index, the loadPage() method can be used.


  • Onsen UI

    @munsterlander I think that’s something different. It will replace your current page with the new one.

    @jorm The only way to do that in Onsen 1 is iterating over all the tabs as you already tried, but probably using setTimeout just to make it asynchronous and let the page initialize.
    In Onsen 2 every tab is persistent and loaded by default, so I think it would be easier to migrate.

  • Great thank you