I know there are a few articles discussing this issue, I followed them all with no luck.
I am getting the ever issue - "Facebook variable does not exist. check that you have included the Facebook JS SDK file"
My bundle name in Xcode is org.apache.cordova.Game
So if I understood correctly in my config file I wrote:
<gap:plugin name="org.apache.cordova.Game.plugins.FacebookConnectPlugin">
<param name="APP_ID" value="123123" />
<param name="APP_NAME" value="Game" />
</gap:plugin>
I am trying to launch the sample index.html and the cdv-plugin-fb-connect.js and facebook-js-sdk.js are both in www folder (copied the js using finder and no action from Xcode)
index.html copied to www in finder as well and the source is :
<body>
<button onclick="login()">Login</button>
<button onclick="me()">Me</button>
<!--<button onclick="getSession()">Get session</button>-->
<button onclick="getLoginStatus()">Get login</button>
<button onclick="logout()">Logout</button>
<button onclick="facebookWallPost()">facebookWallPost</button>
<button onclick="publishStoryFriend()">friendstory</button>
<div id="data">loading ...</div>
<!--<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>-->
<div id="fb-root"></div>
<!-- cordova -->
<script src="cordova.js"></script>
<!-- cordova facebook plugin -->
<script src="cdv-plugin-fb-connect.js"></script>
<!-- facebook js sdk -->
<script src="facebook_js_sdk.js"></script>
<script>
.........
First of all from cordova 3 the one should add the the config file the plugin as feature and not as plugin
<feature name="org.apache.cordova.facebook.Connect">
<param name="ios-package" value="FacebookConnectPlugin" />
</feature>
Second of all in the html it should be on device ready and not as documented in the web dev API by FB:
document.addEventListener('deviceready', function() {
try {
FB.init({ appId: "12345", nativeInterface: CDV.FB, useCachedDialogs: false });
FB.Event.subscribe('auth.authResponseChange', function(response) {
getProfile();
});
} catch (e) {
alert(e);
}
}, false);
Related
Please help me on this issue, The below code is working fine on Android but not working on iOS. Its returning the error
XMLHttpRequest cannot load file:///var/containers/Bundle/Application/16B00380-9909-4D99-B4CA-B02DA895431B/Pilot%20Forge.app/www/templates/Menu.html.
Cross origin requests are only supported for HTTP
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<script type="text/javascript">
var Appclaim = angular.module("app_forge", []);
Appclaim.controller("claimController", function ($scope) {
$scope.MenuTemplate = {
Name: "Menu.html",
Url: "templates/Menu.html"
}
});
</script>
<form name="form" ng-app="app_forge" ng-controller="claimController">
<div>{{MenuTemplate.Name}}</div>
<div ng-include="MenuTemplate.Url"></div>
</form>
</body>
</html>
Just ran into this today - adding this to the config.xml under the ios platform section fixed it for me.
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />
That and making sure you have the newest version of the iOS platform added / and that you are using WKWebView instead of the UIWebView.
Here's a GitHub issue that helped to find the answer:
Cordova not allowing https cross origin requests.
And here's a link to the article on Cordova's site:
UPDATED: How to handle the 'Deprecated API Usage - UIWebView' warning while uploading to the App Store
I guess iOS treats all file:// protocols as cross origin now. (iOS is proving to be a real pain to develop for.)
I am currently having trouble with focus on my inputs for iOS. It works perfectly on Android, but for some reason something is going with iOS where sometimes it takes multiple clicks before it actually registers a click event on the input and opens the keyboard with focus in the input and other times it gives focus to some random element behind the visible one so the keyboard opens, but the input field doesn't have focus. We have multiple inputs that are hidden behind the visible one, but I don't think that should matter.
Ionic info:
Your system information:
Cordova CLI: 6.2.0
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X Sierra
Node Version: v6.3.0
Xcode version: Xcode 8.0 Build version 8A218a
A basic outline of our code can be found here: http://codepen.io/anon/pen/wzYEQk
<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
<ion-content class="background-cntr" delegate-handle="mainScroll">
SOME HTML CONTENT
</ion-content>
<ion-footer-bar>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text"/>
<input type="text" style="display:none;"/>
</label>
<button>Test</button>
</div>
</div>
</ion-footer-bar>
</ion-view>
Does anyone know how to solve this?
Remember adding this preference tag on my config.xml file before.
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
This made the autofocus work before.
I have figured out the solution and to make it work better. Instead of having all the inputs within the footer, I add and remove them every time. That way there is only ever one input within the footer. This seems to work fairly well. The second thing I did was to handle the phantom keyboard case by add the following code to the controller.
window.addEventListener('native.keyboardshow', function(){
if (document.activeElement.nodeName !== "INPUT") {
var activeElement = document.querySelector("#chat_footer_inputs input");
if (activeElement) {
activeElement.focus();
$ionicScrollDelegate.scrollBottom(true);
}
}
});
JS
angular.module('ionicApp', ['ionic'])
.factory('focus', function($timeout, $window) {
return function(id) {
$timeout(function() {
var element = $window.document.getElementById(id);
if(element)
element.focus();
});
};
})
.controller('MyCtrl', function($scope, focus) {
focus("myInput")
});
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input trouble on iOS</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
<ion-content class="background-cntr" delegate-handle="mainScroll">
SOME HTML CONTENT
</ion-content>
<ion-footer-bar>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text"/>
<input type="text" style="display:none;"/>
</label>
<button>Test</button>
</div>
</div>
</ion-footer-bar>
</ion-view>
</body>
</html>
I wrote the code for login page,when i am running on desktop using phonegap desktop it working perfectly,but while i build that using phonegap build and when i tried to open in my phone the submit button is not working.Here is my code:
<script>
$(document).ready(function(){
});
function btnclick(){
debugger;
$.ajax({
type:"GET",
url: url/"+$('#useName').val()+"/"+$('#Password').val(),
contentType: "application/javascript",
jsonpCallback: "Login",
dataType: "jsonp", //Expected data format from server
});
}
function Login(data)
{
if(data==true)
{
window.location.assign("home.html");
}
else{
$('#error').show();
}
}
</script>
</html>
And for giving input:
<form>
<input id="useName" type="text" placeholder="E-mail address" />
<input id="Password" type="password" placeholder="Password" />
<input type="submit" value="submit" id="btnclick" onclick="btnclick()" />
</form>
The only thing I can think of that is causing you troubles is the whitelist configuration needed for navigating external sources.
you should add on your config.xml something like:
<access origin = "*" />
<allow-navigation href="http://*/*" />
you can modify them to fit your needs but do try it out fist with a global access to verify that this is your problem.
Also add the cordova whitelist plugin
<gap:plugin name="cordova-plugin-whitelist" source="npm" version="1.0.0"/>
The deviceReady event is not fired when starting the app.
Dragging the notifications list down from the top of the screen and releasing then causes the deviceReady to fire.
Similarly, trying to display a page in the inAppBrowser doesn't display until the notifications are dragged down and released.
Key elements in the config.xml are:-
<gap:plugin name="cordova-plugin-whitelist" version="1.0.0" source="npm" />
<gap:plugin name="cordova-plugin-inappbrowser" source="npm" version="1.0.1" />
<gap:plugin name="cordova-plugin-device" source="npm" version="1.0.1" />
<preference name="permissions" value="none"/>
<preference name="fullscreen" value="true" />
<preference name="exit-on-suspend" value="true" />
Html:-
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Security-Policy" .... />
</head>
<body >
<div id="idSplash" class="textCenter" >
<div id="idSplashHeader">
<div class="headerImg"></div>
</div>
<div>
<div id="idSplashMessage">Starting up ...</div>
</div>
<div id="idSplashBody"></div>
<div id="idSplashFooter"><a id="idTestLink" href="javascript:null" target="_blank">Click here for google</a></div>
</div>
<!-- ************************************************************************** -->
<script src="js/jquery-2.0.3.min.js" type="text/JavaScript" ></script>
<script type="text/JavaScript">
$(document).ready(function () {
function onReady() {
$("#idSplashMessage").text("deviceReady");
alert("deviceReady");
}
document.addEventListener("deviceReady", onReady, false);
$("#idTestLink").click(function () {
var win = window.open(encodeURI("http://www.google.co.uk"), '_blank', 'location=yes');
return false;
});
});
</script>
<script src="cordova.js" type="text/JavaScript"></script>
</body>
</html>
The source of the problems was the inclusion of a content security policy in the html.
Although I believe the CSP was entirely valid, and did not cause any issues with Android, I removed it which allowed the IOS version to work.
The CSP was added in the first place due to an error log from the whitelist plug in suggesting it was required.
#Grebe,
this is a common misunderstanding with developers new to Cordova/Phonegap.
From: Top Mistakes by Developers new to Cordova/Phonegap
4. In the code, did not listen for the 'deviceready' event.
(...) 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.
This means you must do this before you call any other libraries.
This also means you need to load cordova.js before jquery.
EXAMPLE
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// _OR_ JUST
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
$(document).ready(function () {
// Call the usual stuff.
}
}
Okay I've been working on this issue for a while now and can't figure this thing out. Simple PhoneGap test app, trying to show an alert.
Using Cordova 2.9.0 for iOS. I've added some simple test code and tested it in chrome to see where it breaks, because it isn't working in the emulator
When I test in the Chrome (of course same result in emulator, but no error message is showing)
It executes the onDeviceReady as it should
It sets tb2 textbox value to 'before alert'
Then it breaks with the error: Uncaught TypeError: Cannot call method 'alert' of undefined, on this line: navigator.notification.alert(...
It should be referencing the cordova.js properly, here is the structure of my app folder:
cordova_plugins.js
cordova.js
/spec
spec.html
config.xml
/css
home.html
/img
index.html
/js
/res
Here is my config.xml code:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.blahblahblah.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Hello World</name>
<description>
Test blahblahblah Application
</description>
<author email="blahblahblah#blahblahblah.com" href="http://blahblahblah.com">
blahblahblah
</author>
<access origin="*" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<plugins>
<plugin name="Notification" value="CDVNotification" />
</plugins>
</widget>
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// Empty
document.getElementById('tb1').value = 'device ready';
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alert
//
function showAlert() {
document.getElementById('tb2').value = 'before alert';
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
document.getElementById('tb3').value = 'after alert';
}
</script>
</head>
<body>
<p>Show Alert</p>
<input type="text" id="tb1" value="" />
<input type="text" id="tb2" value="" />
<input type="text" id="tb3" value="" />
</body>
</html>
I have searched documentation, and haven't found any clue of why this isn't working, most answers to this question don't address version 2.9.0
Thanks in advance.
I know the question is about Phonegap 2.9, but that's the first thing Google spits when somebody looks for "phonegap alert not working". So here's what I did for it to work with Phonegap 3.0:
According to the manual, you need to add the plugin to your project. Just navigate to your project root folder and write this command:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
After that, I added this to my html:
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {
navigator.notification.alert("PhoneGap is working", function(){}, "", "");
}
</script>
I'm using Phonegap 2.9.0 and the problem that i had is that I haven't add the script cordova.js to the page.
Also be aware that exist a cordova.js file specific to each platform so watch out of adding cordova.js from android on iOS.
Remember that all calls to the phonegap API should be done after deviceready has fired
try to add this feature to your config.xml file..
<feature name="Notification">
<param name="wp-package" value="Notification"/>
</feature>
..I hope that's help...
All you need is to add the plugin:
cordova-plugin-dialogs
Then use the alert function which will interrupt program flow:
alert("some problem here");
Works for iOS and Android.