Onsen UI v2.0.0-rc.18 with Vanilla JS - ons-navigator doesn't work in Android 4.4.2 and older



  • I love this framework, it is framework agnostic and has beautiful UI. Recently I updated Onsen UI in my app to v2.0.0-rc.18, then I tested it in older Android version (4.2.2 and 4.4.2), the result is page navigation did not work.
    I also tested in Android 4.4.4 & 5.1.1, and they doesn’t have this issue.
    Reverting to v2.0.0-rc.17 and the navigation works good on those Android versions.



  • @frosdqy Can you post your navigation code? Also, when are you calling it? Do you have any errors in the console or warnings? I have run several apps with Vanilla and did not experience this issue going from 17+. If I had to guess, it is going to be a DOM attachment issue or something else that is inhibiting the call to the navigator pushPage.

    Edit: The most important part is that the Android version should not have an issue as all Android’s support webkit / webview. The JS doesn’t change that so we have something else going on that is specific to that platform.



  • I use Onsen UI Navigation template in my app. I also tested with a new project using the template without major modifications (just changing the referenced js and css files to v2.0.0-rc.18 and changing toolbar text), the result is same (navigation is not working). When I click on a list item, nothing happens. Below is the used code:

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="mobile-web-app-capable" content="yes" />
    
      <!-- JS dependencies (order matters!) -->
      <script src="scripts/platformOverrides.js"></script>
      <script src="lib/onsen-2.0.0-rc18/js/onsenui.js"></script>
    
      <!-- CSS dependencies -->
      <link rel="stylesheet" href="lib/onsen-2.0.0-rc18/css/onsenui.css" />
      <link rel="stylesheet" href="lib/onsen-2.0.0-rc18/css/onsen-css-components-blue-basic-theme.css" />
    
      <title>Onsen UI Navigation</title>
    
      <!-- App init -->
      <script src="js/app.js"></script>
    
      <style>
        .picture {
          background-color: #ccc;
          width: 50px;
          height: 50px;
        }
    
        .label {
          font-size: 12px;
          color: #999;
          float: right;
          padding-top: 10px;
        }
    
        #main-list div.right,
        #detail-list div.right {
          display: inline;
        }
      </style>
    
    </head>
    
    <body>
      <!-- Cordova reference -->
      <script src="cordova.js"></script>
      <script src="scripts/index.js"></script>
      <!-- -->
    
      <ons-navigator id="myNavigator">
        <ons-page id="home-page">
          <ons-toolbar>
            <div class="center">Navigation RC18</div>
          </ons-toolbar>
    
          <ons-list id="main-list">
            <!-- This list will be filled on page initialization -->
          </ons-list>
        </ons-page>
      </ons-navigator>
    
      <ons-template id="detail.html">
        <ons-page id="detail-page">
          <ons-toolbar>
            <div class="left">
              <ons-back-button>Back</ons-back-button>
            </div>
            <div class="center">Details</div>
          </ons-toolbar>
    
          <ons-list id="detail-list" modifier="inset" style="margin-top: 10px">
            <ons-list-item modifier="longdivider" tappable onclick="app.alertMessage()">
              <div class="left">
                <div class="list__item__thumbnail picture"></div>
              </div>
              <div class="center">
                <div id="title" class="list__item__title"></div>
                <div id="desc" class="list__item__subtitle"></div>
              </div>
              <div class="right">
                <span id="label" class="label"></span>
              </div>
            </ons-list-item>
    
            <ons-list-item modifier="chevron" tappable onclick="app.alertMessage()">
              <div class="left">
                <ons-icon icon="ion-chatboxes" class="list__item__icon" fixed-width style="color: #ccc"></ons-icon>
              </div>
              <div class="center">
                Add a note
              </div>
              <ons-if class="right" platform="android">
                <ons-icon icon="md-info-outline"></ons-icon>
              </ons-if>
            </ons-list-item>
          </ons-list>
    
          <!-- This list will be filled on page initialization -->
          <ons-list id="lorem-list" style="margin-top: 10px">
            <ons-list-item>
              <div class="center">
                <div class="list__item__title">Lorem ipsum dolor sit amet</div>
                <div class="list__item__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, incididunt ut labore et dolore magna aliqua.</div>
              </div>
            </ons-list-item>
          </ons-list>
        </ons-page>
      </ons-template>
    </body>
    </html>
    

    js/app.js

    (function(){
      'use strict';
    
      window.app = {};
    
      app.alertMessage = function(){
          ons.notification.alert('Tapped!');
      };
    
      app.showDetail = function(index) {
        document.querySelector('#myNavigator').pushPage('detail.html',
          {
            data : {
              itemIndex: index
            }
          }
        );
      };
    
      var items = [
        {
            title: 'Item 1 Title',
            label: '4h',
            desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
        },
        {
            title: 'Another Item Title',
            label: '6h',
            desc: 'Ut enim ad minim veniam.'
        },
        {
            title: 'Yet Another Item Title',
            label: '1day ago',
            desc: 'Duis aute irure dolor cillum dolore eu fugiat nulla voluptate.'
        },
        {
            title: 'Yet Another Item Title',
            label: '1day ago',
            desc: 'Duis aute irure dolor in reprehenderit in voluptate nulla pariatur.'
        }
      ];
    
      document.addEventListener('init', function(event) {
        var page = event.target;
        if(page.id === "home-page") {
          var onsListContent = document.querySelector('#main-list').innerHTML;
    
          items.forEach(function(item, index) {
            var onsListItem = '<ons-list-item tappable onclick="app.showDetail(' + index + ')">' +
                '<div class="left">' +
                  '<div class="list__item__thumbnail picture"></div>' +
                '</div>' +
                '<div class="center">' +
                  '<div class="list__item__title">' + item.title + '</div>' +
                  '<div class="list__item__subtitle">' + item.desc + '</div>' +
                '</div>' +
                '<div class="right">' +
                  '<span class="label">' + item.label + '</span>' +
                '</div>' +
              '</ons-list-item>'
            ;
    
            onsListContent += onsListItem;
          });
    
          document.querySelector('#main-list').innerHTML = onsListContent;
        }
    
        if(page.id === "detail-page") {
          var item = items[(page.data || {}).itemIndex] || {};
          page.querySelector('#title').innerHTML = item.title || 'foo';
          page.querySelector('#desc').innerHTML = item.desc || 'bar';
          page.querySelector('#label').innerHTML = item.label || 'baz';
    
          var i = 5,
            onsListContent = '',
            onsListItem = document.querySelector('#lorem-list').innerHTML;
    
          while(--i) {
            onsListContent += onsListItem;
          }
    
          document.querySelector('#lorem-list').innerHTML = onsListContent;
        }
    
      });
    
    })();
    

    Sorry, I don’t have any error message as I didn’t debug it. I just installed the apk on real devices (Samsung Galaxy Note II with Android 4.4.2 and another tablet with Android 4.4.0) and MEmu emulator (Android 4.2.2).



  • @frosdqy Can you try the below code just to check some things? In the script tags, change rc18 to rc17 if it doesn’t work.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
        <title>Onsen UI Forum Help by Munsterlander</title>
        <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.18/css/onsenui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.18/css/onsen-css-components.css">
        <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.18/js/onsenui.js"></script>
        <script src="components/loader.js"></script>      
      </head>
      <body>
    <ons-navigator page="pg1" id="myNav"></ons-navigator>
    <ons-template id="pg1">
        <ons-page>
            <div>Page 1</div>
            <ons-button onclick="document.getElementById('myNav').pushPage('pg2');">Got to Page 2</ons-button>
        </ons-page>
    </ons-template>
    <ons-template id="pg2">
        <ons-page>
            <div>Page 2</div>
            <ons-button onclick="document.getElementById('myNav').pushPage('pg1');">Got to Page 1</ons-button>
        </ons-page>
    </ons-template>
    </body>
    </html>
    


  • @munsterlander Tested your code with two devices (Android 5.1.1 and Android 4.4.0). It works on Android 5.1.1, but not working on Android 4.4.0. The error from Android 4.4.0: Uncaught TypeError: Cannot call method ‘removeEventListener’ of undefined
    File: https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.18/js/onsenui.js
    Line Number: 20438

    Also tested changing the RawGit links from rc.18 to rc.17, and it works on Android 4.4.0.



  • @frosdqy Awesome! That is progress. The only downside, 2,362 additions, 1,730 deletions from RC.17 to RC.18. Maybe someone from the team will recognize what the change may be.



  • @frosdqy Have you tried using Crosswalk? That generally fixes device specific glitches like this.

    I think I know why this happens and have added a simple sanity check to fix the error that will be released with the next version.



  • @argelius Awesome!
    And will definitely try the plugin, thanks.


Log in to reply