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: 20438Also 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.