Swiper not working on Android

[julianmatz]

Hello! First off, I think MobileUI is great! However, I've run into an issue with the Swiper component. When testing in the browser, either on Windows / Chrome or on Android / Chrome, it works fine. But when I deploy the app on my phone or use it inside the Phonegap Developer app, the first slide appears on the page, but I am not able to swipe. Also, the swipe buttons do not appear. Here is my code:

var authKey;

var app = {
	// Application Constructor
	initialize: function() {
		document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
	},

	// deviceready Event Handler
	//
	// Bind any cordova events here. Common events are:
	// 'pause', 'resume', etc.
	onDeviceReady: function() {
		this.receivedEvent('deviceready');
		
		var storage = window.localStorage;
		//storage.setItem( 'authKey', 'T35T' );
		
		authKey = storage.getItem( 'authKey' );
		//console.log( authKey.length );
		
		if ( authKey == null || authKey.length !== 32 ) {
			
			include( 'container', 'login', function() {
				new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
					paginationClickable: true
				});
			}); 
		}
		else {
			include( 'container', 'home' );
		}
	},

	// Update DOM on a Received Event
	receivedEvent: function(id) {
		console.log('Received Event: ' + id);
	}
};

app.initialize();

[julianmatz]

Seems it is working on one phone but not the other. Both are running Android 6.0.1. Any ideas?

[julianmatz]

I'm seeing the following on the device this isn't working on:

Uncaught TypeError: document.querySelectorAll(...).forEach is not a function Uncaught ReferenceError: Swiper is not defined

[fabiorogeriosj]

Hi @julianmatz, I think that your code is running before the Swiper to be loaded.

Just for test replace this code:

                        include( 'container', 'login', function() {
				setTimeout(function (){
                                         new Swiper('.swiper-container', {
				        	pagination: '.swiper-pagination',
					        paginationClickable: true
         				});
                                }, 2000)
			}); 

If this work fine, you need check you struct of code, because the swiper component not to be loaded correctly.

[julianmatz]

Hi @fabiorogeriosj. Thanks for replying! I've tried your suggestion, but it's the same. Also, the same code works on my other device.

I think maybe the first error in mobileui.js is preventing the Swiper component from loading. But I don't know why it's throwing this error just one the one device.

[fabiorogeriosj]

@julianmatz the device that not work is Android 6.0? Check what is the version of WebView in system.

[julianmatz]

@fabiorogeriosj It's Android 6.0.1 and System WebView is 74.0.3729.157.

I did some more testing and it looks like the "Include" component seems to be the issue on this device. When I use Swiper without include, the swiper works. But when I use Include without Swiper, I still get the following error in the console:

Uncaught TypeError: document.querySelectorAll(...).forEach is not a function

[julianmatz]

I figured out what the issue was, although it still doesn't make much sense to me. I created a new app from scratch and kept it as simple as possible. Swiper then worked on the device. When I compared both versions in WinMerge, I spotted that the Swiper component wasn't being added to mobileui.js. Even with mobileui install swiper --update, it wasn't getting added. I had to delete the file and re-run the install command.