I have almost completed an ASP.NET webforms website using jQuery Mobile. I am stuck on one specific use case.
The site is scoped to support Android, iPhone, BlackBerry and Windows Mobile all of the functionality works great except for one specific use case.
The case is when a user is entering a value into one of the input boxes and then hits the native Go/Enter key. I am capturing this and throwing the appropriate event submit button click/tap with jquery.
function BindSubmit(textbox, button) {
$(textbox).unbind().keypress(function (event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
$(button).trigger('tap');
}
});
}
This works great on all devices but one, Android. The phone ends up submitting the entire form instead of following the use case. Grabbing the onsubmit event and returning false doesn't work either. After some digging I found this Disabling 'go' button form submission in Android when using webview .
I am hoping for a solution to this for a standard webform. Thanks.
Thank you for the help. The way we solved this is binding to the form.submit event and calling the mobile.changePage() ourselves. Then after the changePage() we return false; This prevented the full form submit and still allowed jquery mobile to complete its actions.
Try running $(button).trigger('click'). This might be a better, more cross-platform way of sending the event.
You should definitely try to test it like this on an Android phone and find out when and where execution fails:
function BindSubmit(textbox, button) {
console.log("BindSubmit()");
$(textbox).unbind().keypress(function(event) {
var keyCode = ...;
console.log("Key pressed: " + keyCode + ", isEnter: " + keyCode == 13);
if (keyCode == 13) {
console.log("Enter key hit, triggering event.");
...;
}
});
}
If you have a link to it, I'd be happy to test it on my Nexus One for you :)
Related
This is the code I have for a Android device BACK button:
function handleKeyOut(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.BACK)
{
event.preventDefault();
gotoAndStop(2);
}
}
When I test the code on my Samsung Galaxy Mega 6.3 phone (Kit Kat), hitting the BACK key button causes the app to not show on the screen yet still run in the background. My app does have a frame 2...Flash debugger gives no errors so I'm thinking maybe it's Kit Kat (since I've had sound issues with Kit Kat already).
I would like for the BACK key to take the user to frame 2. If I code a 'Native Application Exit' for the BACK key it works fine...the BACK key just won't accept the gotoAndStop command.
I'm researching this now so thanks if anyone can put some insight into this.
THIS WORKS...
stage.addEventListener(KeyboardEvent.KEY_DOWN, buttonPressed);
function buttonPressed(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.BACK)
{
event.preventDefault();
stage.removeEventListener(KeyboardEvent.KEY_DOWN, buttonPressed);
gotoAndStop("home");
}
}
I have searched all over the web and found different ways of closing a PhoneGap App. I tested all of them and none work. At least on Android.
Question:
Is it possible (By Feb 2014) to have a close button in a PhoneGap App on Android?
Thanks
This doesn't work:
function CloseApp() {
if (confirm('Close this App?')){
if (navigator.app) {
navigator.app.exitApp();
}else if (navigator.device) {
navigator.device.exitApp();
}
}
}
Is
navigator.app.exitApp()
really killing/closing the android app with phonegap?
I use cordova and have the same issue. Above mentioned code is just putting the app into background - I checked the running tasks (android task manager) after above code got executed by the app.
I am confused on why you want a button to close the app. Android already has a back button when clicked enough times will take the user back to the phone's main screen. There is also a home button that takes the user out of an app. Once, out of the app the user can "kill" the app through a task manager.
navigator.app.exitApp()
works and I use it in all my cordova apps. Check the rest of your code.
As ejwill said, having a "close" button is a bad idea. On Android I call exitApp when the user is the home page of my app and he presses the backbutton:
function onDeviceReady() {
document.addEventListener("backbutton", onBackKey, false);
}
function onBackKey( event ) {
var l = window.location.toString();
var parts = l.split('#/'); // this works only if you are using angularjs
var page = parts[1];
if (page == 'home') {
navigator.app.exitApp();
} else {
// do something else... one option is:
navigator.app.backHistory();
}
}
My 2c.
I am building a phonegap app with jquery mobile and using build.phonegap.com
I have an event to change the page to the login screen after startup process have completed.
This works fine but it will not work on my andriod device unless a debugger is attached to it, in which case it works fine.
The code I have is
$.mobile.changePage("login.html");
I have put this in the mobileinit, pageshow, and now on document.ready function but it doesnt change the behaviour.
I've checked if $.mobile is a function and it is, Have tried everything and can not seem to figure out why this would be happening, any feedback would be much appreciated
I managed to put in a hack to work around this issue.
It was something to do with my phone being really old and slow, so something was getting a little messed up on old/slow andriod versions.
To prevent this from being an Issue I figured out this way that solves the issue and boots up my jquery mobile app on phone gap even if the phone is very slow.
$(document).bind('mobileinit', function () {
setTimeout(function () {
var html = $(".loading-status-text").html();
/* The html has Please Wait in the dom so we know it han't been touched by jQuery */
if (html == 'Please Wait') {
window.location.href = 'index.html';
}
}, 10000);
$(document).on("pageshow", function (e) {
var pageId = $.mobile.activePage.attr('id').toString();
if (pageId == 'loadingScreen') {
/* This wouldn't fire at first */
$(".loading-status-text").html("Welcome to Appname");
$.mobile.changePage("login.html");
}
});
});
It seems that the Android browser doesn't properly implement window.location.replace.
In most browsers, calling window.location.replace will replace the current URL with the URL passed to it.
When the user navigates somewhere else then clicks back, they'll be returned to the URL that was passed to window.location.replace, rather than the URL that they were at before window.location.replace was called.
The Android browser doesn't seem to implement this properly.
In the Android browser, the user will be directed back to the original URL rather than the one passed to window.location.replace.
You can test this for yourself here.
So is there any alternative way to re-write history in Android? Or will I just have to live without that feature, for Android users?
I had the same issue and ended up with code similar to chris suggestion, but I changed the if statement to use modernizr's feature detection.
If you're not using modernizr the code would look something like this:
if(!!(window.history && history.replaceState)){
window.history.replaceState({}, document.title, base + fragment);
} else {
location.replace(base + fragment);
}
Unless you have a specific reason for device detection, feature detection is preferred since it basically supports all devices, even future ones.
To make it work across all/most mobile platforms check out this link.
Shows how to handle redirect for Android, iPad and iPhone.
Android uses document.location whereas iOS supports window.location.replace
Will this work?
document.location.href = 'http://example.com/somePage.html';
You can try using the replaceState method on the history window.history
if (((navigator.userAgent.toLowerCase().indexOf('mozilla/5.0') > -1 && navigator.userAgent.toLowerCase().indexOf('android ') > -1 && navigator.userAgent.toLowerCase().indexOf('applewebkit') > -1) && !(navigator.userAgent.toLowerCase().indexOf('chrome') > -1))) {
window.history.replaceState({}, document.title, base + fragment);
} else {
location.replace(base + fragment);
}
I am creating one HTML mobile website for android & ios device.
I know click to call for both.
ANDROID
2125551212
iOs
Live Support
Now, my problem is i have one webpage with click to call link and want that link work for both android / ios
Just use tel: it will work on iOS, android, blackbarry OS, windows and many more. Using this scheme will work on almost all mobile browsers on.
You have to recognize the client. Since different phones have different user agents, you can do something like this with JavaScript:
if (navigator.userAgent.indexOf("Android") != -1) {
txt = "2125551212";
} else if (navigator.userAgent.indexOf("iPhone") != -1) {
txt = "Live Support";
}
This works for me as well.
212-555-1212
The problem with this is it will break add-ons and extensions that people may use on desktop browsers.
The plain phone number will call on click for Android OS.
<p>212-555-1212</p>
You can also track this call with AdWords. I am working on getting it to work with Google Analytics.
In regards to MoyShe's post and not to steal her code (complements) I would add a conditional default for Desktop browsers and other as well using a default else statement.
if (navigator.userAgent.indexOf("Android") != -1) {
txt = "2125551212";
} else if (navigator.userAgent.indexOf("iPhone") != -1) {
txt = "Live Support";
}
<!--what about other devices OS-->
else {
txt = "<span><strong>Phone -</strong> 282-122-9627 ext.7877</span>";
}
That way desktop browsers users could also see a phone number as it would display a phone number by default if the device is not of the two handheld device queried.
I am not versed in android, blackberry, IOs, windows, etc...but I would also like to ask or point out my comment section.
<!--what about other devices OS-->
(For Newbs- the above line of commented code can be removed when pasting in the web page).
What about blackberry and all the other device OS's? Are they Android or IOs driven OS's? If not, additional code to specifically identify those devices would also need to be created and included in the (else if's) statements.
If I am correct in my unknown question, a Switch/Case statement might be cleaner and a better way to go.
as on
Msaccess Help Australia www.msaccess.com.au
You only want ordinary text showing on a PC browsers
so put this line in your page
<script type="text/javascript" src="javascript.js"></script>
and save the below in a file called javascript.js
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf ("mobile");
if (isAndroid)
{document.write('<a class="mobilesOnly" href="tel:++61476132591"> Click here to call tel:++61476132591</a>');}
else
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i)))
{document.write('<a class="mobilesOnly" href="tel:++61476132591"> Click here to call now: tel:++61476132591</a>');}
else
{document.write('Call ++61476132591') ;}
don't forget to change the number :)