Develop Reference

Ionic - text input on Android 10+ not echoed

I've been experiencing the most peculiar error with my Ionic app when running it on Android 10.
The attached gif should pretty much sum up what's the problem but what I can tell is that it's working properly on Android devices with a version lower than ten.
Basically speaking, none of the actual input is echoed to the screen unless I hit some visual divider (ie space). It applies to virtually every text input in the app but the login screen should be enough to get the idea.
Text input on android 10 device:
And to provide some code as well, this would be the affected login code snippet.
<ion-content no-bounce id="login-content">
<img
src="assets/logo/datenpool-logo-blue.svg"
alt="datenpool-logo"
title="datenpool-logo"
id="datenpool-logo"
/>
<form [formGroup]="loginForm">
<div fxLayout="column" fxLayoutAlign="center center">
<ion-input
placeholder="{{ 'authentication.login.form.username' | translate }}"
type="text"
formControlName="username"
[formControl]="loginForm.controls['username']"
required
></ion-input>
<ion-input
placeholder="{{ 'authentication.login.form.password' | translate }}"
type="password"
formControlName="password"
[formControl]="loginForm.controls['password']"
required
></ion-input>
<mat-error *ngIf="isInvalid">
{{ error }}
</mat-error>
<button
(click)="login()"
type="submit"
[disabled]="!loginForm.valid"
class="button"
>
{{ 'authentication.login.form.button' | translate }}
</button>
</div>
</form>
<div fxLayoutAlign="center center">
<button (click)="forgotPassword()" class="forgotpw">
{{ 'authentication.login.forgot-password' | translate }}
</button>
</div>
</ion-content>
Personally I doubt that the code is faulty but rather that it's something to do with Android and its predictive text feature.
At any rate, I hope somebody can point me towards the right direction; thanks in advance, guys.

I managed to find the reason behind the problem.
What I didn't mention is that the project is using Capacitor. And due to that there exists a capacitor.config.json. And in that JSON file there's a dedicated android block with the following properties:
"android": {
"backgroundColor": "#ffffffff",
"allowMixedContent": true,
"captureInput": false,
"webContentsDebuggingEnabled": true
},
What happened was that captureInput was set to true. And what captureInput does is to replace the standard Android keyboard with a simpler one thus enabling devs to use key capture events more easily.
What it apparently also does is to render text input on Android 10 virtually useless.

ion-content and android 4.3 scroll on loadmore

I have a serious problem with ionic and android 4.3.
I have a list of elements dinamically loaded from a rest service.
When I execute the loadMore function (with the ion-infinite-scroll directive) the view doesn't resize on devices with android 4.3 version (tested on emulator and samsung gt-i9300), making it impossible to scroll over new elements.
I have tried to call the
$ionicScrollDelegate.resize();
on:
success function of $http.get
ng-repeat finish custom directive (even with a timeout of 10 seconds)
with no results.
This is my html code:
<ion-content lazy-scroll >
<ion-refresher
pulling-text="Reload.."
on-refresh="refresh()" >
</ion-refresher>
<div class="list card" ng-repeat="newsItem in newsList" ng-click="goToDetail(newsItem)">
<div class="item item-image myImage">
<img image-lazy-src="{{newsItem.image}}" fallback-src="./img/binewsplaceholder.png">
</div>
<div class="item">
<h2 ng-bind="newsItem.title"></h2>
<categories-in-list categories="newsItem.categories" ></categories-in-list>
<p><i class="ion-calendar myLabel"></i> {{newsItem.date | date: 'dd MMMM yyyy'}}</p>
<p class="text-right" ng-show="newsItem.distance && newsItem.distance != 'NaN' ">
<i class="ion-android-pin myLabel"></i> <span>{{newsItem.distance | number:0}} km</span>
</p>
</div>
</div>
<ion-infinite-scroll
immediate-check="false"
on-infinite="loadMore()"
ng-if="hasMorePage"
distance="1%">
</ion-infinite-scroll>
</ion-content>
Plus, I have the same issue on a "read more" function, that show/hide a div with long text. In that case I found the solution (than removed because of a weak ux) of:
Loading the view with the long text displayed
wait 5-6 second, then hide it
So..
Is this an issue with android 4.3?
I'm not sure, because in another app everything works fine, with the (more or less) same behavior.
Any suggestion?
Thanks.

I have the same issue on my same smartphone. I don't have an idea if this error coming from the Ionic or is a trouble with the device. I found this solution and work fine for me:
Setting overflow-scroll="false" in the ion-content HTML element:
<ion-content overflow-scroll="false">
I hope that has been of helpful.

Passing value from html to javascript in phonegap

I am trying to develop a shopping cart system using kendo-ui mobile and phonegap. First I am listing all the items in a list view. In each listview item, there will be one plus button, minus button and a label.I am using this combination for selecting the quantity of items.So, if we click plus button, the label value should be 0+1=> 1 and when we click minus, it should be like 1-1=>0 .To change the value of label when clicking button, I am passing the id of label to change the corresponding label value. But I am not able to pass the id form html to javascript, like I do in web development. Here is my code,
My listview item template,
<script type="text/x-kendo-tmpl" id="endless-scrolling-template">
<div class="product">
<img src="images/image.jpg" alt="#=ProductName# image" class="pullImage"/>
<h3>#:ProductName#</h3>
<p>$#:kendo.toString(UnitPrice, "c")#</p>
<a id="minus" data-role="button" data-click="minus(#:ProductID#)" >-</a>
<label id=#:ProductID#>0</label>
<a id="plus" data-role="button" data-click="plus(#:ProductID#)" data-name="plus">+</a>
<a id="loginButton" data-role="button" data-click="login">Add to Cart</a>
<div class="console"></div>
</div>
and my javascript functions,
<script>
function plus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)+1;
}
function minus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)-1;
}
</script>
Can anyone please tell me what Iam doing wrong here? Or can you provide an alternate solution?

When using Kendo, you can use Kendo MVVM. When JS objects are wired up in views using Kendo MVVM, when the value of the input elements change, the value of the JS objects reflects the change automatically. So what you need to do is to create a JS model for your view and set it as your view's model using data-model="yourModel". See this link: http://docs.kendoui.com/getting-started/mobile/mvvm
In your scenario here I think this link will help you: http://demos.kendoui.com/web/mvvm/source.html
This behavior is explained in the Kendo mobile book I wrote and you can see the checkout screen of the sample application built for the book here: http://movies.kendomobilebook.com/

How do I mimick Google Play's horizontal div scrolling using jQuery mobile?

I am currently exploring jQuery Mobile's functionalities. I am quite intrigued by the way Google Play Store handles horizontal sliding, hence, when the user slide taps to the right, the view should slide to the next page and when the user slide taps to the left the view should scroll to the previous page, if any. I know this can be done using native jQuery but I'm not yet familiar with events on mobile devices and I'm sure there is already a built-in functionality for this.
I'd like to try this first with Android devices and if possible with iPad and iPhone. Can anybody guide me on ways to accomplish this?
BTW, I'm not talking about browser history here, probably just some div, pages, if possible.

It can be done but you will be sadly disappointed.
It can be achieved like this:
Multiple page's inside one single HTML. Every page will have swipeleft and swipe right binded to it. When event is triggered changePage() function will make a transition to previous/next page. This sounds excellent and works just fine on desktop browser but fails miserable when executed with phonegap on android phones. Transitions are still a huge problem on android phones, iOS fares better but not to much.
Something like this:
$('#page-two').on('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).on('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Swipe events are supported with jQuery Mobile so no need for 3rd party plugins.
Use a jQuery Mobile carousel plugin like this example: http://jsfiddle.net/blackdynamo/yxhzU/
Original plugin: https://github.com/blackdynamo/jQuery-Mobile-Carousel
Unlike page transitions this plugin will give you much better feeling on mobile phones.
What ever path you choose android tab look will be achieved with navbar inside a second header:
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-theme="a" data-role="header">
<div data-role="navbar">
<ul>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
</ul>
</div><!-- /navbar -->
</div>

Solution #1 -- This should be the easy way to do it:
<script>
$(document).delegate("#homepage", 'pageinit', function (evt) {
$(this).bind("swipeleft", function (e) {
$.mobile.changePage("#anotherpage", {
transition : 'slide'
});
});
}).delegate("#anotherpage", 'pageinit', function (evt) {
$(this).bind("swiperight", function (e) {
$.mobile.changePage("#homepage", {
transition : 'slide',
reverse : true
});
});
});
</script>
Solution #2 -- This one is even much simpler:
$('#homepage').bind('swipeleft', function() {
$.mobile.changePage('#anotherpage', {transition: 'slide', reverse: false});
});
$('#anotherpage').bind('swiperight', function() {
$.mobile.changePage('#homepage', {transition: 'slide', reverse: true});
});

Scrolling in JQuery mobile

I am creating an application using JQuery Mobile which needs to support both iOS and Android. (I am using PhoneGap). Does scrolling on long pages work by default or do I need to set up my divs to support scrolling. How is scrolling on iOS different from an android device?
Also, is there a way to make a ajax call when the user scrolls to the bottom of the page to retrieve more content?
Any help is appreciated.

1) jQuery Mobile 1.1.0 uses the browser's native scrolling so it seems natural on every supported platform.
jQuery Mobiles does however require the following pseudo-page structure:
<div data-role="page">
<div data-role="header">
...
</div>
<div data-role="content">
...
</div>
<div data-role="footer">
...
</div>
</div>
If you follow this structure, the more you add to the data-role="content" section, the longer the page will be.
2) You can set an event handler for the scroll event to detect the user scrolling and see how far down the page the user is:
//you don't want to set a bunch of AJAX requests at once,
//so set a flag so only one will go off at a time
var ajaxOK = true;
$(window).on('scroll', function () {
var yDistance = $('html, body').scrollTop();
//here you can check how far down the user is and do your AJAX call
if ((yDistance + $(window).height()) > ($.mobile.activePage.children('.ui-content').height() - 150)) {
//the user is within 150px of the bottom of the page
if (ajaxOK === true) {
ajaxOK = false;
$.ajax({ ... });
}
}
});
Then in your callback function for the AJAX call you set ajaxOK = true; so that when the user scrolls to the bottom again it will fire.
Here's a quick break-down of the if/then statement in the scroll event handler:
(yDistance + $(window).height()) > ($.mobile.activePage.children('.ui-content').height() - 150)
(yDistance + $(window).height()): the scroll-distance plus the view-port height, to find the bottom of the page's Y coordinate.
($.mobile.activePage.children('.ui-content').height() - 150): the height of the current page minus a buffer of 150px so the user can get within 150px and the AJAX call will occur

Scrolling should happen automatically if you overflow the browser window. For infinite scrolling you can try http://www.infinite-scroll.com/.
If you are using the listview for jquery mobile you may need to call the refresh event after adding more list view items to the dom to get the filtering behavior and styling to work.