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.
- Did you use
persistent
? This should solve your issues.
<ons-tab persistent>
- Have you thought about migrating to 2.0? It is light years ahead of 1.0.
- Did you use
-
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');
-
@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