ons-tab with a single template

[jorm]

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.

[munsterlander]

@jorm A couple of things.

1. Did you use persistent? This should solve your issues.

<ons-tab persistent>

2. Have you thought about migrating to 2.0? It is light years ahead of 1.0.

[jorm]

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

[munsterlander]

@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');

[Fran Diox]

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

[jorm]

Great thank you