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.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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