iOs Page with tabbar not loading



  • I created an app with a page with the “tabbar”-element. This page is just not loading and I can’t figure out why. I reduced the possible causes down to the tabbar. If I delete the tabbar, the page is loading (well there isn’t much more than the tabbar element).
    I also tested it on Android and everything is working as intended there.

    Here is my code:
    The page with the tabbar:

      <template id="home.html">
        <ons-page id="home-page">
          <ons-toolbar>
            <div class="left"></div>
            <div class="center">Tabbar Test</div>
            <div class="right">
              <ons-toolbar-button onclick="fn.open()">
                <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
              </ons-toolbar-button>
            </div>
          </ons-toolbar>
          <ons-tabbar position="top">
            <ons-tab page="kitchen.html" label="Kitchen"></ons-tab>
            <ons-tab page="occasion.html" label="Occasion"></ons-tab>
          </ons-tabbar>
        </ons-page>
      </template>
    

    And the two tab pages:

      <template id="kitchen.html">
        <ons-page id="kitchen-tab">
          <div>Here will be a list</div>
        </ons-page>
      </template>
    
      <template id="occasion.html">
        <ons-page id="occasion-tab">
          <div>Here will be a list</div>
        </ons-page>
      </template>
    

    Is there something wrong with the code? Or is this a known issue with a fix?



  • I still have this problem. If I push the page with the tabbar on an ios phone, it just doesn’t work. Do you need more info to isolate the problem?


  • Onsen UI

    @kk Is that home.html page the root of your all? If so, remove its <template> element wrapper. Does this example works?



  • @Fran-Diox Sorry, couldn’t respond the last two days…

    The app is actually way bigger, with a lot more sites.
    I don’t really have a root template I think.

    I use a splitter like that:

      <ons-splitter>
        <ons-splitter-side id="menu" side="left" width="220px" collapse>
          <ons-page>
            <ons-list>
              <ons-list-item onclick="fn.load('home.html')" tappable>
                Home
              </ons-list-item>
              <!-- More list items -->
            </ons-list>
          </ons-page>
        </ons-splitter-side>
        <ons-splitter-content id="content">
          <ons-navigator swipeable id="myNavigator" page="login.html"></ons-navigator>
        </ons-splitter-content>
      </ons-splitter>
    

    So my first page is the “login.html” which has a login-button of course which when clicked pushes the “home.html”.

    Login.html:

      <template id="login.html">
        <ons-page id="login">
          <div class="page-wrapper">
            <ons-row class="header">
              <ons-col>
                <span class="tte-font">My App</span>
              </ons-col>
            </ons-row>
            <ons-row><ons-input id="email" modifier="underbar" placeholder="E-Mail" float></ons-input></ons-row>
            <ons-row><ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input></ons-row>
            <ons-row><ons-button id="login-button" modifier="large">Login</ons-button></ons-row>
          </div>
        </ons-page>
      </template>
    

    app.js:

    document.addEventListener('init', function(event) {
      var page = event.target;
      
      if (page.id === 'login') {
        page.querySelector('#login-button').onclick = function() {
          loadingModal(true);
          // verify credentials and stuff then do:
          document.querySelector('#myNavigator').resetToPage('home.html'); // I use "resetToPage" so the user can't go back to the login page
        }
      }
    }
    

    The example you posted is working. If I expand it with a splitter like mine and a login page etc. it’s also working.
    Since I don’t get en error message on my app, I’m a little at a loss where to start debugging. I just know, that my page works if I remove the tabbar, which is kind of odd.

    I also would love to post the whole app, but it’s actually really large already and not really refined yet.


Log in to reply