Onsen UI - changePage with save toolbar, tabbar and preload ajax text

Question

I just want to create an app based on Cordova + onsen UI but I have a small problem. On first screen, I have choosing user language and "start" on press start I'm sending uuid and lang to my database for future user language recognization. After press start I want to move the user to page named 'dashboard'. I'm using: myNavigator.replacePage('dashboard.html'); It works but my toolbar and tabbar going lost. Is there any option to change page without losing tab bar and tool bar?

I have tab bar and toolbar in other template navigation.html it looks like:

<ons-page>
    <span id="uuid" style="display: none;"></span>
    <span id="deviceLang" style="display: none;"></span>
    <ons-toolbar>
        <div class="left">
            <ons-toolbar-button>
                <ons-icon icon="md-menu"></ons-icon>
            </ons-toolbar-button>
        </div>
        <div class="center" style="color: #fff;">
            MY APP
        </div>
        <div class="right">
            <ons-toolbar-button>
                <ons-icon icon="md-menu"></ons-icon>
            </ons-toolbar-button>
        </div>
    </ons-toolbar>

    <ons-tabbar position="auto">
        <ons-tab icon="fa-user" label="AA" page="home.html" active></ons-tab>
        <ons-tab icon="fa-home" label="BB" page="dashboard.html"></ons-tab>
        <ons-tab icon="ion-ios-cog" label="CC" page="settings.html"></ons-tab>
    </ons-tabbar>
</ons-page>

--- dashboard.html

<ons-page>
    <ons-row>
        <ons-col width="50%">
            <p>MYCONTENT</p>
        </ons-col>
        <ons-col width="50%">
            <p>MYCONTENT</p>
        </ons-col>
    </ons-row>
</ons-page>

--index.html body

<ons-navigator id="myNavigator" page="navigation.html"></ons-navigator>
        <template id="home.html">
            <ons-page>
                <ons-row>
                    <ons-col>
                        <div style="text-align: center;">
                            <h1>MY APP</h1>
                            <ons-select class="select">
                                <select class="custom-select" id="languages">
HERE IS SELECT
                                </select>
                            </ons-select>
                            <br/><br/><br/>
                            <ons-button id="saveLanguage">
                                NEXT
                            </ons-button>
                        </div>
                    </ons-col>
                </ons-row>
            </ons-page>
        </template>

Second question- I want to get translated text for page dashboard.html after click 'next' on homepage. When I should put translated data (downloaded by ajax) to show translated text on dashboard.html(on ready)?

score 0 · Answer 1 · answered Sep 20 '19 at 04:38

Of course it will. You are combining a navigator and a tabbar together. If you want it to persist, you should have the navigator in the home.html page and then use that. I would rethink your workflow. Specifically, what do you want to present the user? Here is an example codepen that combines the two like you have with some options:

https://codepen.io/munsterlander/pen/BQQNOL

<ons-navigator id="myNav" page="page1.html"></ons-navigator>

<ons-template id="page1.html">
<ons-tabbar animation="slide">
  <ons-tab label="Tab 1" page="tab1.html" active>
  </ons-tab>
  <ons-tab label="Tab 2" page="tab2.html">
  </ons-tab>
</ons-tabbar>
</ons-template>

<ons-template id="page2.html">
<ons-tabbar animation="slide">
  <ons-tab label="Tab 3" page="tab3.html" active>
  </ons-tab>
  <ons-tab label="Tab 4" page="tab4.html">
  </ons-tab>
</ons-tabbar>
</ons-template>

<ons-template id="tab1.html">
  <ons-page>
    <div align="center" style="padding:10px;">
    <ons-button onclick="fn.pushPage()">Push New Page</ons-button>
      <p>This is tab 1</p>
    </div>
  </ons-page>
</ons-template>

<ons-template id="tab2.html">
  <ons-page>
    <div align="center" style="padding:10px;">
    This is tab 2
    </div>
  </ons-page>
</ons-template>

<ons-template id="tab3.html">
  <ons-page>
    <div align="center" style="padding:10px;">
    <ons-button onclick="fn.popPage()">Pop Page</ons-button>
      <p>This is tab 3</p>
    </div>
  </ons-page>
</ons-template>

<ons-template id="tab4.html">
  <ons-page>
    <div align="center" style="padding:10px;">
    This is tab 4
    </div>
  </ons-page>
</ons-template>

Here is another option for using the splitter and tabbar if you do not want to go the navigator route.

https://codepen.io/munsterlander/pen/gmoeXM

Onsen UI - changePage with save toolbar, tabbar and preload ajax text

1 Answers1