Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. kk
    3. Posts
    K
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups

    Posts made by kk

    • RE: iOs Page with tabbar not loading

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

      posted in Onsen UI
      K
      kk
    • RE: iOs Page with tabbar not loading

      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?

      posted in Onsen UI
      K
      kk
    • 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?

      posted in Onsen UI
      K
      kk
    • RE: Can't login in Monaca Debugger and website

      @jamesakhban Even tho that doesn’t fix it, it’s good to know it’s not me :) Thanks

      Edit: It works again.

      posted in Monaca Tools
      K
      kk
    • Can't login in Monaca Debugger and website

      Hey,

      I can’t login since an hour so. I got automatically logged out from the Monaca Debugger on my phone and if I try to login I get the message:

      No internet connection available. Please confirm network status.
      

      I definitely have WiFi internet connection which is working for everything else right now.

      I also can’t login on the monaca.io website. I get a “500 Internal server error”. Every other site is working.

      Are there problems on my side or is monaca not working right now?

      posted in Monaca Tools
      K
      kk
    • Navigator inside splitter iOS problem

      I have the occuring topic combining the splitter and the navigator.
      It’s basically working and I tested it on Android and iPhone with iOS 10.3.3, but it isn’t working on an iPhone with iOS 11.0.0.
      The splitter is opening but I just can’t click any “links” in the navigation to open the new pages.

      Here is my code:

      The splitter with the navigator:

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

      And the javascript part:

      window.fn = {};
      
      window.fn.open = function() {
        var menu = document.getElementById('menu');
        menu.open();
      };
      
      window.fn.load = function(page, data) {
        var content = document.getElementById('myNavigator');
        var menu = document.getElementById('menu');
        content.pushPage(page, data)
          .then(menu.close.bind(menu));
      };
      
      window.fn.pop = function() {
        var content = document.getElementById('myNavigator');
        content.popPage();
      };
      

      I tried multiple solutions, but nothing is working on the new iPhone.

      Thanks in advance.

      posted in Onsen UI
      K
      kk