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.
So basically, there's this form. It works perfectly in every browser, even in the mobile simulator in Chrome, but as soon as I use a device such as Samsung Tablet and open the website in Android Browser, there's this particular textarea that doesn't let me finish the text when I go back in the field.
So I type a text, I leave the input field, I go back but the cursor jumps to the start, which means it doesn't let me finish the text I already started because I can't get to the end.
Clicking doesn't work, sliding works but jumps straight back to the start.
<div class="col-sm-12">
<label for="DEPOSIT_EXTRA_INFO" class="controllabel">Label<span class="info-trigger not-visible" data-reference="DEPOSIT_EXTRA_INFO"></span></label>
</div>
<div class="col-sm-12">
<textarea class="form-control" id="DEPOSIT_EXTRA_INFO" data-sim-mask="alphanumeric" data-required="true" name="DEPOSIT_EXTRA_INFO" maxlength="250" tabindex="20">~EXT_BABYACCOUNT.DEPOSIT_EXTRA_INFO~</textarea>
<div class="remaining-textarea pull-right hidden">Number of characters left<span class="remaining-textarea-counter">{0}</span>
</div>
</div>
I am testing an Android Hybrid application using Appium v1.3.4 (REV c8c79a85fbd6870cd6fc3d66d038a115ebe22efe) which is the lastest at the moment. I also downloaded the latest ChromeDriver from here: https://groups.google.com/forum/#!topic/chromedriver-users/iBdJQHu1ipQ
The login screen in the application under test is a hybrid view (WebView). So I am switching to the proper context via calling appiumDriver.context("WEBVIEW_com.my.app.pkg")as shown below and I am also able to successfully locate and populate both the username and the password fields with the proper text data using the following code:
appiumDriver.context("WEBVIEW_com.my.app.pkg");
WebElement userNameTextField = appiumDriver.findElement(By.id("username"));
userNameTextField.click();
userNameTextField.sendKeys(new String[]{"Guest"});
WebElement passwordTextField = appiumDriver.findElement(By.id("password"));
passwordTextField.click();
passwordTextField.sendKeys(new String[]{"password"});
// The following code is not working
WebElement loginButton = appiumDriver.findElement(By.id("loginbutton"));
loginButton.click();
However, my issue is when I try to click on the login button on this screen! This is how the button is written in HTML
<div href="#" id="loginbutton" class="button">Login</div>
I tried many ways to click on the button while I am in the Web context but all so far has been in vain...This is the HTML snippet for the login screen
<div id="formbody">
<div class="line">
<input placeholder="Username" type="text" id="username" class="styled_input" value="">
</div>
<div class="line">
<input placeholder="Password" type="password" id="password" class="styled_input" value="">
</div>
<div class="line_button">
<div href="#" id="loginbutton" class="button">Login</div>
</div>
</div>
After many many attempts to click on the div/link in the Webcontext, I gave up and switched to the NATIVE context and was able to click on the button using the following code:
appiumDriver.context("NATIVE_APP");
appiumDriver.findElementByName("Login").click();
Can anyone explain to me why I am able to interact with the username and password textfields in the WebView context but have to switch to the NATIVE_APP context to be able to interact with the button?
Also note that while in the WebView context I am able to find the button ... tag by id and to call loginButton.getText(), loginButton.isEnabled(), loginButton.isDisplayed() and getTagName()
Thanks
driver.findElement(By.xpath("//*[#id=\"formbody\"]/div[3]")).click();
should work. Inspect elements on your device using chrome, this will give you exact xpath.
To inspect elements, type this command in chrome: chrome://inspect/#devices
I have a main navbar, which loads contents - using .load() - to a div data-role=content according to whats selected,
so i use the TapHandler event on the navbar, to load the content like:
$("#mainc").load(target, function() {
$("#index").trigger("pagecreate"); //#index is the page id
});
Div where content is being loaded:
<div data-role="content" id="mainc">
</div>
Whats being loaded: ( the second navbar )
<div id="profile_navbar" data-role="navbar">
<ul>
<li>My Profile</li>
<li>Events</li>
<li>Settings</li>
</ul>
</div>
And the problem is, the first click, evrything goes perfect, then, it starts duplicating some borders on and on, the more i change tabs, the more borders it gain,
i dont use .trigger('create') there, because it doesnt get the loaded content styled with the jqm css.
Images:
What is going on here?
Thanks.
After some hours of struggle, I found that the problem was not with .trigger(“pagecreate”) but with .load()
So i came up with this: (dont ask me why, all I know is that it works this way)
$.get(target, function(data) {
$('#mainc').html(data);
$('#mainc').trigger("create");
});
instead of:
$("#mainc").load(target, function() {
$('#mainc').trigger("create");
});
We are developing a mobile web app in jQuery Mobile 1.0.1 and Phonegap 1.4.1 and have run into issues with the keyboard on the galaxy s2.
We have a menu which slides out and contains a search input:
<input type="search" placeholder="Search..." name="search" id="menu_search" data-role="none" />
When we tap in the input so that it gains focus, the keyboard opens but does not allow us to type anything in. I guess a clue here is that its giving us a regular text keyboard and not the search keyboard (which has a magnifying glass as the enter key)
If we focus the input when the menu opens: $("#menu_search").focus() - The search keyboard is open when the menu displays and we are able to search BUT as soon as we tap in the input the keyboard changes to a regular keyboard and we a not able to type anything.
Another clue is that while typing in the keyboard the auto-predict works but when tapping on the correct option only a space is added to the input and none of the other characters.
We have tried a bunch of other attribues on the search input to no avail:
<input type="search" placeholder="Search..." name="search" id="menu_search" value="" data-role="none" autocomplete="off" autocorrect="off" autocapitalization="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" style="-webkit-appearance:searchfield;" class="ui-autocomplete-input" />
This all works fine on a HTC Desire running 2.2 and a desire running CM7 (Android 2.3.7)
We even tried changing the input to a textarea but this did pretty much the same thing :(
I also tried:
$("#menu_search").live('focus',function(event){
event.preventDefault();
});
to see if that would prevent it from changing keyboards but no luck either.
We do however have another search input elsewhere in the app which works fine, the only difference being that the other search is in a "propper" page: data-role="page" and the menu is outside of all of the other pages and in its own just set to hidden initially.
Please help, im crying blood atm!
You probably have
-webkit-user-select: none;
In your CSS somewhere. If you enable text selection for inputs
input, textarea { -webkit-user-select: text; }
it works again!
Did you try adding data-native-menu="false" attribute to your search input tag.
If you're still stuck on this, try updating to phonegap 2.0. It fixes some input problems.
$('#pageid').live('pageshow', function(event, ui) {
$(this).delegate('input[data-type="search"]', 'keyup', function () {
if($(this).val().length != 0)
keyword = $(this).val();
});
});
i'v create an app using phonegap + jequery you look for it in playStore "AssignmentReminder" or type in the search field koshWTF.
anyway. i'd encouraged this issue before and haven't fixed it as i guess its 4.0.1 issue not the phone gap nor jquery mobile , because i still can type under 4.0.4 and lesser. hope you find the answer for it because i did search aloot last time and couldn't find it.
I have/had the same issue on my Note II running 4.1.1 rooted using Phonegap 2.6.0 (though I can also replicate it in 2.5.0), jQuery Mobile 1.2.0, and jQuery 1.7.2. My keyboard is SwiftKey 4.0.1.128.
Except rather than just one input causing me issues, my form has multiple inputs that eventually cause me trouble. It's a real headache because it's hard to replicate - the input always works at first, but if you switch between inputs randomly and long enough, it eventually stops working at a random time.
This error used to happen fairly quickly, so that it would make it a pretty significant issue considering I would have to restart the app to get the form working again, which would eventually stop working yet again. My new form structure seems to work well; the error occurs after literally minutes of typing long strings and randomly switching inputs, which I assume no user will be doing; but it still upsets me that the error is there.
I tried to get help on this error on the jQuery Mobile forum, but they gave me some snarky comment about how it's likely just my element ID usage, because apparently 99% (probably not even realistic) of JQM errors are from incorrect ID usage. I know for a fact my IDs are all unique across every page, but they insist it's an ID error without even trying to correctly diagnose the issue, but I digress.
I should also note that I found the CSS solution that was provided in another answer in many other similar issues across the web, but not this exact issue; while I understand its usage, the CSS did not fix the issue for me.
My form is dynamically loaded into a data-role="content" DIV inside of a data-role="page" DIV, so:
<div data-role="page">
<div data-role="content" id="my-form-holder">
</div>
</div>
I've found the best form structure, at least in my application, to cause the error least frequently is:
<form id="account-add" action="add-edit-account.php" method="post" data-ajax="false" autocomplete="off">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="custom-name">
</label>
<input name="custom-name" placeholder="Account Name" value="Service Name Here" type="text"><br>
<label for="custom-1">
</label>
<input name="custom-1" placeholder="User ID" type="text"><br>
<label for="custom-2">
</label>
<input name="custom-2" placeholder="Password" type="password"><br>
<input type="hidden" name="action" value="add-2">
<input type="hidden" name="newserviceid" value="3">
<input type="hidden" name="userid" value="1">
<input id="account-add-submit" type="submit" name="account-add-submit" value="Add Account">
</div>
</form>
The form HTML is fetched via AJAX and loaded into the DIV by:
$(ajaxData).appendTo("#my-form-holder").trigger("create");
Naturally, your form will be a bit different, and you may not even have a form since you just have a search input (getting to that in a moment). But if you do have a form, that's what works best for me.
Since you're in Phonegap, you may not even need an action theoretically since you likely have jQuery to handle the input, but jQuery Mobile docs state forms must have action and method attributes, so I didn't want to go against that. Also, jQuery Mobile usually has a data-role="field-contain" DIV around each label/input group, but I found that the error occurred sooner if I did this. Again, the error occurs at an arbitrary moment that is never the same, so I don't know if it's directly related to the DIV.
I also have an input hard-coded into another page:
<div data-role="fieldcontain" class="ui-hide-label">
<label for="service-search-input">
</label>
<input name="service-search-input" id="service-search-input" placeholder="Enter a service to search for" type="search">
</div>
This seems to work fine. However, there are no other inputs to switch to, so the best I can do to try to replicate the error is focus/unfocus the input by tapping elsewhere on the page. Though, I am always able to type initially whereas your error doesn't let you type at all if I understand correctly. You may want to try that HTML structure and see if it works. There is no form tag surrounding that input.
Our issues are a little different (I have most of my issues with a dynamically injected form whereas yours is hard-coded from what I gather), but this is the only page I could find anywhere that directly addresses this exact issue, so hopefully this helps and we can get some further insight on this issue.