Dynamically set href in iframe not working in Chrome on Android - android

I have a page (jobs.php) which has all the mobile features like call, sms and email. I am accessing this page as an iframe in the main index.php page.
I have made a function such that before making a call or sms or email, it logs the entry into the database.
jobs.php code
Javascript (all variable are defined and working)
<img src=\""+imgpath+"email_logo.png\"onclick=\"setMailLog('"+installername+"',"+customerId+",'"+email+"')\" id=\"mimg_"+customerId+"\"/>
function setMailLog(installerName, customerId,email){
console.log("Email Attempted:");
$.ajax({
url: 'functions.php',
type: 'POST',
dataType:'text',
data: 'elogins='+installerName+'&elogcid='+customerId,
success: function(result){
console.log(result);
$("#mimg_"+customerId).wrap('<a id="mhrefid_'+customerId+'" target="_blank"></a>');
$('#mhrefid_'+customerId).attr('href','mailto:'+email);
window.location.href=$("#mhrefid_"+customerId).attr('href');
}
});
}
This is working perfectly fine on all desktop browsers. Its working fine on default browser in Android but breaks on Chrome in Android which is important because these are mobile features and should work on mobile device on every browser.
When I click on the mail icon in Chrome on Android, it says
The web page at mailto:email might be temporarily down or it may have removed permanently to a new address
Error 302(net::ERR_UNKNOWN_URL_SCHEME): Unknown error
The error page shows up only in particular iframe and not on the whole index.php file.
Call and sms functions the same way, just the error changes to tel:5225 or sms:5114
This is all in an iframe, may be that's what causing the problem?

Looks like a bug to me. I've created a ticket to track it https://code.google.com/p/chromium/issues/detail?id=223146
To work around the issue, replace
window.location.href=$("#mhrefid_"+customerId).attr('href');
with
window.top.location.href=$("#mhrefid_"+customerId).attr('href');
That changes the location of the top-level page rather than the iframe, which works fine in Chrome.

Related

how to call external web services in phonegap application

I am new to phonegap. I want to call server side web service from phonegap application to get data. I have tried it on browser it working fine and also on Phonegap developer app for Android. Both are working fine. But if i make .APK from PhonegapBuild console and installed on android device, it doesn't work anymore.
I have used AJAX to call web service. I also tried other solutions related this but all are fail.
Solution 1:
Changed in config.xml
< access origin="*"/> with
< access origin="http://mywebserviceipaddress"/>
Solution 2: Changed AJAX call with .get() method. For this added image where i have added two methods for code.
Solution 3: Added
$.ajax({
...
crossDomain: true,
async: false,
cache : false,
...
});
in AJAX call
Here is my both code. Please tell me if missing any parameters.
enter image description here

PhoneGap database working on emulator, but not on device

Im just learning PhoneGap and I have some problems conserning the databases...
SO I want to connect to my localhost databse and simply display the items from the table.. With the ripple emulator everything works, but when I install the app on my device the data is not displayed, but im not getting any errors either.
So I am using the PhoneGap Desktop App. The server is running on http://88.216.170.246:3000
So in my ajax I do this:
$(document).on('click', '.show', function (e) {
$.ajax({
type:"GET",
url:"http://88.216.170.246/Test/www/getData.php",
success: function(result) {
if (result) {
$(".show_data").html(result);
}
else {
alert("error");
}
}
});
});
});
This renders everything perfectly on the emulator, but on my phone, nothing happens... Does the url not work? Maybe I cant access localhost on my device?
Please read:
Top Mistakes by Developers new to Cordova/Phonegap
https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md
READ #1, #4, #5, & #10
#4 reads
In the code, did not listen for the 'deviceready' event.
This is listed MULTIPLE times in the documentation, and is include in every example where it is appropriate. It is still missed. Brian Ford - an Angular developer, points to the section of documentation we need.
This is a very important event that every Cordova application should use.
Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
Please read the FAQ and follow the links. You have made many bad assumptions.
Best of Luck
Jesse

Ajax call not working in Chrome for Android web app

net::ERR_ADDRESS_UNREACHABLE
Is the error I get.
It's just a standard Ajax call:
$.ajax({
url: postLink,
type: 'POST',
data: JSON.stringify(postData),
...
I suspect there's nothing wrong with the call itself.
Here's why - if I run the page in Chrome for Android it runs fine. No problems at all.
If I add that page to the homescreen, then Android treats the page as a web app (which is fine too, because it is). But I think there's something about the way Android/Chrome treats web apps that is stopping the Ajax call from going through. In this instance, the error above occurs.
Anyone heard of this issue before, perhaps know of a workaround?

oAuth support in a WebView

So I've created a simple WebView application that wraps an already existing mobile friendly site and displays it on the device. I've enabled javascript, supported screen orientation changes, etc...
I've run into an issue with the oAuth support though. Accessing the site from the chrome browser on the device, everything runs fine.
If I try to access the site from the app/WebView, it will push me over to the oAuth screen, let me input credentials and everything, but the moment it tries to push me back to the website and log me in, I get this:
Failed to recognize URL query:
https://exittix.com/frontend/login/redirect.html#access_token=******************************&expires_in=********&state=****client_id=******************network*****facebook*****display***popup****callback****_hellojs_agj27sx5****state****oauth_proxy***https***auth-server.herokuapp.com%2Fproxy***scope***basic_profile***email***basic***oauth***version***auth***https***facebook.com%2Foauth***
The * is used to protect data.
So, any ideas why oAuth isn't working inside a JS enabled webview but works fine in the mobile chrome browser for android?
Thanks in advance for your help!
EDIT:
Ok, so I've tracked the error I'm getting back to redirect.html.
This page calls some javascript. If the javascript fails to redirect, then it displays that error I have above instead.
The javascript being called to handle the oAuth is Andrew Dodson's hello.js script.
You can see it HERE.
I've concluded that the second half of the error's url is indeed the unhandled JSON.
Here's what the returned data looks like after I've decoded it from the URL encoded characters:
{"client_id":"************.apps.googleusercontent.com","network":"google","display":"popup","callback":"_hellojs_********","state":"","oauth_proxy":"https://auth-server.herokuapp.com/proxy","scope":["https://www.googleapis.com/auth/userinfo.profile","https://www.googleapis.com/auth/userinfo.email","basic"],"oauth":{"version":2,"auth":"https://accounts.google.com/o/oauth2/auth"}}&access_token=***.*.*****_*********************************************************&token_type=Bearer&expires_in=3600
Any ideas why this isn't getting handled properly in the WebView?

PhoneGap + Android + jQuery Mobile - Connection to server unsuccessful

I'm trying to create an Android (2.2) app using Phonegap (version 1.9.0) and jQuery Mobile (1.1.0). Specifically, the app is supposed to send a GET request to an existing WCF REST service and retrieve JSON data (a list of folders) and display each item as an option in a select drop down menu.
Right now, all this works as it should when I use the desktop browser. The WCF REST service sends the correct response, the browser renders the page correctly and puts the options in the select menu as I want it to. However, when I use the following code in Android app using Phonegap:
$.getJSON('http://xxx.xxx.xxx/MobileService.svc/GetFolders?callback=?', null, function (folders) {
$.each( folders, function( i, folder ) {
$("#folders").append("<option value='"+folder.Id+"'>"+folder.Name+"</option>");
});
$("#folders").selectmenu("refresh");
});
...I get the error message when I boot the Android app (debugging on physical device):
Connection to the server was unsuccessful. ("file:///android_asset/www/index.html")
When I comment out the above $.getJSON code, the app loads fine, but the select menu is unpopulated.
I've also noticed that apparently because Phonegap uses the "file://" protocol, it is not affected by the "same-origin policy" that the "http://" protocol is...I had been using JSONP when I was working with the browser, which is why I have the callback. I don't think this should be the reason why it is failing, but I dont know. Any help will be greatly appreciated!
Things I've tried:
Changing the access origin to ".*" in the cordova.xml
Adding 'super.setIntegerProperty("loadUrlTimeoutValue", 60000);' to the activity
You can try to set your cordova.xml to "*" instead of ".*" as seen on the Getting Started Guide
Or even better:
http://xxx.xxx.xxx
It turns out in my particular case that the issue boiled down to the mobile phone being on guest wifi network that didn't have access to the network where the REST service was hosted so the connection was being blocked.
Hope that can help someone

Categories

Resources