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;

    tabBar.setActiveTab(1);
    tabBar.setActiveTab(0);
    });

    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.

    tabbar.loadPage('newpage.html');
    

  • 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


Log in to reply