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.

munsterlander

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

munsterlander

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

munsterlander

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

argelius

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