I've installed the latest PhoneGap version (3.3), packaged my Mobile Services HTML application and hit the known authorization issue:
Login is only supported from http:// and https:// URLs. Please host your page in a web server
I've searched internet for this issue (http://social.msdn.microsoft.com/Forums/windowsazure/en-US/a2386093-73cd-44fb-a418-4fa83a36c800/phonegap-apps-using-the-new-html-client-for-azure-mobile-services-is-not-working?forum=azuremobile) but the solution does not work for me. The project created by phonegap references <script type="text/javascript" src="phonegap.js"></script> but even when i changed it to <script type="text/javascript" src="cordova.js"></script> it does not work.
Is there any solution for this issue?
My source code:
<html>
<head>
<meta charset="utf-8" />
<title>Report</title>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<script type="text/javascript" src="cordova.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.1.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="myscript.js"></script>
</head>
myscript.js
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
var client = new WindowsAzure.MobileServiceClient(
"https://myapp.azure-mobile.net/", "XXX");
client.login("google").done(....
},
};
$(document).ready(function documentReady() {
app.initialize();
});
Edit 21.12.
Apparently PhoneGap 3 does not report its version in window.device.cordova anymore where Mobile Services checks it. But even faking it did not help - after authorization on Google, it goes to empty page.
The version issue has been fixed recently with an update to the device core plugin.
device.cordova.version should correctly state what version you are running.
So if you intended to do a work around with it, you might be able to do it now.
Related
simple axios works fine in emulator and browsers but doesn't work on Samsung Tizen TV 2016 and there is no error in console.
with using cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
and script like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Tizen basic template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - Samsung Tizen TV basic Application</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/main.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="width: 1920px; height:1080px; position: fixed;">
<script>
axios.get('https://api.github.com/users/axios')
.then(function(response){
console.log(response.data);
id = response.data.id;
alert(id);
});
</script>
</body>
</html>
solved. there's a line of code that must be added to our script before using axios:
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
You need to set the privilege and the access policy in the config.xml
Privilege
In order give the permission to access the network you need to set it in the tizen studio.
<tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
Policy
Hery you need set set which urls you can access.
<access origin="*" subdomains="true"/>
The deviceready isn't firing correctly (at least in iOS) for my cordova project. I have searched for hours and still cannot figure this out. Am I doing something incorrectly? The path to js/cordova.js exists as well:
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, user-scalable=no" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script type="text/javascript">
// Fastclick
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
alert("ready");
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
I'm not sure what I'm missing as I'm not getting any errors if I inspect in Chrome
There's no need to have the cordova.js inside your www/js/ folder because that file is copied from another location to platforms/ios/platform_www (i.e. by running: cordova build ios) at the same level that the index.html file, so in order to have a proper configuration, the next statement:
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
must be changed to:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
deviceready event is essential to any application. It signals that Cordova's device APIs have loaded and are ready to access.
Update
So I got "deviceready" to work by removing the onload="onLoad()" from the body and replacing this:
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
with just this:
document.addEventListener("deviceready", onDeviceReady, false);
I had the same problem, my solution was to add :
<script type="text/javascript" src="cordova.js"></script>
in the HTML file and everything worked perfectly
I had this same issue, but in my case cordova.js was already properly included.
Eventually what worked for me was a simple remove and add of the ios platform:
cordova platform remove ios
cordova platform add ios
It had been quite a while since I had completely re-built the ios platform and other major changes had taken place during that time (Cordova upgrade, XCode upgrade, etc). It's possible that my config.xml or existing ios build was somehow incompliant with the latest Cordova requirements.
I'm not exactly sure how to ask this question. I don't have easy access to my company site to try this using normal AJAX calls, so I'd need to resolve cross domain issues as well as possibly change settings on our Jira server. Since I'm home all week this week ostensibly on vacation, but a bit bored before Thanksgiving, I thought I'd play around with this so I can get a jump on the project I just got assigned this past Friday.
Using the Jira Rest API, if I drop https://jira.atlassian.com/rest/api/2/projectinto a browser (Chrome) and press enter, I get valid JSON data back in the browser. Granted you have to have valid Jira credentials as well as be already logged onto the site for this to work (otherwise you just get [] for a response), but for the experimentation I'm doing that's OK. I'm just trying to generate some valid data that I can massage into a form.
How can I do this in JavaScript in an automated fashion so the returned JSON goes into a variable that I can use for subsequent data manipulation? Ideally this should work on our real Jira site, but I'm fine if it just works on the sites linked in this question, as I said I'm just doing some experimentation trying to read project data and associated properties.
I've tried (cite):
$.getJSON("https://jira.atlassian.com/rest/api/2/project?callback=?", function(result){
//response data are now in the result variable
alert(result);
});
I've also tried to simply eval() the string into a variable, but that doesn't work either.
My eventual project will most likely be in jQuery / jQuery Mobile, but a straight JS answer is fine, I can translate that into jQuery later if it becomes necessary.
EDIT:
Here is the HTML I'm using to test this and suggestions being made, pretty much straight out of https://html5boilerplate.com/:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
var result = $.get("https://jira.atlassian.com/rest/api/2/project");
console.log(result);
</script>
</body>
So using AJAX / .get, etc was the wrong approach (at least for this experiment, it's the right answer for when I have access to the JIRA server).
What I found that worked was using:
location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
console.log(data);
This is not a perfect answer because it replaces the body of the web page with the JSON response from JIRA, but it allowed me to move forward. I found several different methods to try in this SO post.
Here's the whole web page:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Get JIRA data</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = document.getElementsByTagName('body')[0].innerText;
console.log(data);
</script>
</body>
</html>
The reason it doesn't work as well as it might is you still have to go after the fact & get the data in the console:
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
But that gives you an array of JIRA objects that you can then manipulate.
Adding this SO question to the answer because it contains useful information about solving CORS (Cross Origin Resource Sharing).
I am developping a web app for iOS and Android, using the last version of PhoneGap.
I want to send Notifications to the users on their phone's status bar, and I cannot figure out how to do that.
It seems that there was a Cordova plugin (StatusBarNotification) that once existed, but all the links I find are dead.
If anyone knows a way to send notif to the statusbar, I would be grateful.
Thanks
Quentin
EDIT : I should have been more specific : I am trying to understand how to use the status area on phones (http://developer.android.com/guide/topics/ui/notifiers/notifications.html), and for that I have a simple html file with a button. I want a notification to appear on the status area when I click the button. (like when you receive a text message, you have a notification).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<input type="button" value="Notiiiiiiif" id="btNotif"/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
btNotif = document.getElementById('btNotif');
btNotif.addEventListener('click', function(){
//There I want a notif to appear in the status bar
});
</script>
</body>
</html>
I am testing this app on my Nexus 4, with Android 4.4.2.
EDIT : I ended up using Google Cloud Messaging (gcm) for android devices and Apple Push Notification (apn) on my node server. This works pretty well with android devices, a bit harder for iphones
Perhaps its already to late for the answer, but I think this would make sence for your furhter work with notifications in PhoneGap. For using StatusBarNotifications in latest versions of PhoneGap (v3.x), you need to a proper Plugin that will work. This should be installed with Cordova CLI.
For the older versions of PhoneGap (v2.9 and below) you still can use DEPRECATED version of StatusBarNotifications from GitHub.
By the way, using of older version is less headache for not experienced developers :)
Hope this will help you.
I'm having real trouble with PhoneGap in the iPhone with the events. The app is running pretty smooth in my android device, but on my iPhone it doesn't anything. For example, a simple code like this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta charset="utf-8">
<title>WayAcross Mobile Application</title>
<link rel="stylesheet" href="css/jquery.css" />
<link rel="stylesheet" href="css/screen.css" />
<link rel="stylesheet" href="css/login.css" />
<script type="text/javascript" charset="utf-8" src="jquery/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile.js"></script>
<script type="text/javascript" charset="UTF-8" src="javascript/mainJavascript.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
// Now safe to use the PhoneGap API
alert('ready');
}
</script>
<script type="text/javascript" charset="utf-8" src="javascript/phonegap.js"></script>
</head>
<body onload="onLoad()">
(this is a code example that doesn't work with iPhone and works with android).
I think its a problem with the events, but I'm not sure. Even the code examples in PhoneGap docs don't work.
My environment is:
Mac OSX 10.7.1
Xcode 4.1
PhoneGap 1.1
jQuery Mobile 1.0RC
The only thing that it shows me is this: http://cl.ly/0h462Y2D2F0J0B1B0q1M
Thanks in Advance.
Regards,
Elkas
By the way, I've installed OSX Lion 10.7.2 and Xcode 4.2 now. Even in the IOS5 its not working. This is driving me crazy!!!
Even with this simple code is not working.
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Device Ready Example</title>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
alert('Hello World');
}
</script>
<script type="text/javascript" charset="utf-8" src="javascript/phonegap.js"</script>
</head>
<body>
</body>
</html>
try putting the addevent listener under document.ready like this.. worked for me for the same problem.
$(document).ready(function(){
document.addEventListener("deviceready",function(){
},false);
});
Problem Solved!!
I run the application without the phonegap.js and it created me a new one. I just changed the name of it to the the one i was loading and the application finally works.
When creating a Phonegap installation for iOS a specific version of the (ie) phonegap.1.4.1.js is used.
Replacing just this file with a newer version (like cordova.1.8.0.js) resulted in alerts not working.
If you want to upgrade to a newer Phonegap version you will have to "redo" your project.
I reverted back to phonegap.1.4.1.js and the events magically started to work again.
Sort of a wild guess here, not sure how you compile this thing into an app but you list XCode so.... The markup points to script files in folder jquery/ and javascript/. When compiling an app with XCode files are not placed in the actual folders that represent the group folders you normally use. In order for the files to actually end up in a directory inside the app you need to to add the folder on your harddrive as a folder reference (they show up as blue folders, not yellow).
The easiest way to check if this is the problem is to just remove the folder path of the script includes to just be the name of the file.
function testDialog() {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.notification.alert("This is message", function(){}, "HaHa", "Done");
}
}