I've been stuck on this issue for 10+ hours now and I'm having no luck in fixing it by myself. The problem is that I'm trying to use this dialog plugin on my Cordova app but its not working. I don't even think that the deviceready script is working.
Any questions feel free to ask
www/index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content=".." />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href="css/layout-styles.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-3.3.7.css" rel="stylesheet" type="text/css">
<script src="cordova_plugins.js"></script>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<title>Plugins Not Working</title>
<script src="cordova.js">
document.addEventListener("deviceready", onDeviceReady(), false)
function onDeviceReady() {
navigator.notification.alert(
'Script has loaded', // message
alertDismissed, // callback
'Loaded', // title
'Done' // buttonName
);
};
function alertDismissd() {
// do something
};
</script>
</head>
</html>
The <plugin name="cordova-plugin-dialogs" spec="^1.3.3" /> is in config.xml
Your code in <script> tag seems alright. If you have added the dialogs plugin using -
cordova plugin add cordova-plugin-dialogs
that should work fine.
And don't add src="cordova.js" for the script containing your code. Just do this -
<script>
document.addEventListener("deviceready", onDeviceReady(), false)
function onDeviceReady() {
navigator.notification.alert(
'Script has loaded', // message
alertDismissed, // callback
'Loaded', // title
'Done' // buttonName
);
};
function alertDismissd() {
// do something
};
</script>
If it still doesn't work, can you inspect in Google Chrome, see and list the error messages under Console tab? There might be some error before that <script> if that onDeviceReady() is not triggered.
UPDATE after seeing error messages from here -
Remove <script src="cordova_plugins.js"></script> That's not required. Plugins are directly called from js.
Cannot read property 'alert' of undefined => the plugin is not properly installed. Install it first using cordova plugin add cordova-plugin-dialogs in cmd.
Remove <script src="js/index.js"></script>. As you are doing everything inside <script> tag, you don't need index.js or its js contents (has errors).
I reinstalled windows 10 and reinstalled cordova as a whole. Now all plugins work :) sorry if this isnt the answer you wanted but it worked for me! Have a good day!
Related
I am trying to set up my facebook instant game.
I have followed https://developers.facebook.com/docs/games/instant-games/test-publish-share , to test locally then deploy into production.
When testing, everything works fine. However, in production, nothing shows up (black screen) when I open my game. <app-root> doesn't render, app-home's constructor isn't called and it takes up 0x0 pixels.
This is my index.html
<!--
Copyright (c) 2017-present, Facebook, Inc.
All rights reserved.
This source code is licensed under the license found in the
LICENSE file in the root directory of this source tree.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="yes" />
<meta name="screen-orientation" content="portrait" />
<meta name="viewport" content="user-scalable=no" />
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<script type="text/javascript">
const assets = [
'img/asset1.png',
'img/asset2.png',
'img/asset3.png',
'img/asset4.png'
];
window.onload = function () {
// When the window loads, start to initialize the SDK
FBInstant.initializeAsync().then(function () {
// We can start to load assets
for (let i in assets) {
// When preloading assets, make sure to report the progress
FBInstant.setLoadingProgress(i / assets.length * 100);
}
// Now that assets are loaded, call startGameAsync
FBInstant.startGameAsync().then(() => console.log("initialized"));
});
};
</script>
<app-root></app-root>
</body>
</html>
'initialized' is printed in the console, when I open the game. There are two errors there with it (which might have to do with the error I am having)
Console logs
The 404 error (resource not found) is a .js file which I checked was included in the .zip file which I uploaded.
This is what i see when I inspect element on the game
Inspect element
Also, on mobile, nothing is displayed (white screen)
Any help would be greatly appreciated.
Thanks! :)
I am working on a Cordova/PhoneGap project. I tried to display js console.log in Xcode console.
I install the cordovan-plugin-console but it is not working.
After reading lost of stackoverflow post, I came up with this code:
<!DOCTYPE html>
<html>
<head>
<script>
function onDeviceReady() {
if (window.cordova.logger) {
window.cordova.logger.__onDeviceReady();
}
}
function init() {
document.addEventListener('deviceready', onDeviceReady, true);
}
</script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/factories/DeviceFactory.js"></script>
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/DeviceController.js"></script>
</head>
<body ng-app="starter" onload="init()">
<script>
console.log("++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++")
</script>
<ion-nav-view></ion-nav-view>
</body>
</html>
However, it is still not working.
Could anyone help me?
Thanks
I don't know about Xcode's console being able to show a javascript console output but i know that you can do the same with safari dev tools, take a look at this : safari dev tools
I'm currently working on web-app using apache cordova, ionic and google map.
I'm getting issues trying to load correctly the google map js api. The problem is that the app don't work on my device but works just fine when I emulate it on Ripple.
So I have a controller for a Ionic View, when the user enter this view a condition check if the google maps api is loaded, if not we load it and then start using the GM Api. I can't figure where it has gone wrong.
Here is the condition making the call for the loading function...
$scope.$on('$ionicView.loaded', function () {
var test = false;
if (test) {
alert("Google Map api fully loaded");
}
else {
alert("Google map api not loaded"); //The alert is fired.
$scope.loadApi();
}
});
The loading function
$scope.loadApi = function () {
if ($cordovaNetwork.isOnline()) //check if device is connected {
alert('Loading api'); //The alert is fired
$.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx',
function () {
alert("Api Loaded"); //Alert not fired on device
$scope.startGeo(); // The function isn't called so no map
});
}
else {
alert('Check your connexion');
}
};
Here is the html part, in case I forgot something....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--Google map for Angular-->
<script src="lib/angular-google-maps/lodash.min.js"></script>
<script src="lib/angular-google-maps/angular-simple-logger.min.js"></script>
<script src="lib/angular-google-maps/angular-google-maps.min.js"></script>
<script src="lib/localforage/localforage.min.js"></script>
<script src="lib/localforage/angular-localForage.min.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--<script src='https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx'></script>-->
<script src="js/controllers.js"></script>
</head>
<body ng-app="myapp">
<ion-nav-view></ion-nav-view>
</body>
</html>
I've tried many things such as using angular-load, replacing the getScript function by an ajax call (that is basically just the same thing), tried this answer to see if it could help..
Thanks for your help.
FIRST SOLUTION
Solved my problem by replacing the Google Map loading links.
index.html
Installed the whitelist plugin and added in the head :
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
Replaced google Map loading link :
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
Got rid of the https: from the link.
controller.js
In the map's controller :
The loading function, I replaced the https protocol by the http one.
$scope.loadApi = function () {
if ($cordovaNetwork.isOnline()) {
console.log($scope.logs.apiLoading);
$.getScript('http://maps.googleapis.com/maps/api/js?sensor=false', function () {
$scope.startGeo();
});
}
else if($cordovaNetwork.isOffline()) {
alert($scope.logs.deviceOffline);
}
};
SECOND SOLUTION (Using angular-google-maps)
Just a reminder of angular google map's config in the app.js
For those using Angular google Map. The library load google map automatically, you just have to set it up properly. There is also an event to check if the google map is loaded. I wasn't aware of this at the time, and mixed everything, angular google maps loading process with mine. etcetera :)
angular.module('myapp').config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'myKey',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization,places'
});
})
This code shows (i.e. alerts) "alert1" but not "alert2". I'm using a Samsung Galaxy Tab 3 7.0 as target device. The following code is in index.js.
EDIT: "alert3" is neither shown - for those who get dazed about javascript contexts and closures.
var app = {
bootStrap: function() {
//code here does not run
window.alert("alert2");
//document.body.style.backgroundColor = "blue";
},
initialize: function() {
var current = this;
//code here runs
window.alert("alert1");
document.addEventListener("deviceready", function(){
//code inside this anonymous function neither runs
window.alert("alert3");
current.bootStrap();
}, false);
}
};
The initialize method is being called:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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/platform.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>1001Carros</title>
</head>
<body>
<script type="text/javascript">
app.initialize();
</script>
<div id="log">
<button id="clickme" value="Click Me"></button>
pantalla principal
</div>
</body>
</html>
Question: why? (also tried commenting and changing the background color to blue but neither line was executed at all).
I tried your code in cordova 3.4.x and it worked without any issues in the emulator.
I have included cordova.js in my index.html file. I can see that you have include phonegap.js. Not sure if that is the issue.
Are you testing on a real (Samsung Galaxy Tab 3 7.0) device or the Android emulator.?
which version of phonegap are you developing for?
You can try to remove all the closure code and test the code has below
document.addEventListener("deviceready", function(){
//code inside this anonymous function neither runs
window.alert("alert3");
}, false);
}
If the above code does not work than it means that the "deviceready" event is not getting fired.
You could try to create a custom event and check whether it works as shown below.
initialize: function() {
var current = this;
//code here runs
window.alert("alert1");
var event = new Event('myevent');
document.addEventListener("myevent", function(){
//code inside this anonymous function neither runs
window.alert("My Event!");
current.bootStrap();
}, false);
document.dispatchEvent(event);
}
I've scoured the net and stackoverflow looking for help, but can't seem to find any and I consider myself officially stumped. All of my code worked without a problem when it was all within standard script tags, then as soon as I moved them to their own .js file it crapped out. Help! This is what I now have in index.html (I've cut out all the irrelevant code since I'm just testing):
<html>
<head>
<title>PhoneGap Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/lib/jquery-1.7.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch-jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch.js"></script>
<script type="text/javascript" src="databasecalls.js"></script>
</head>
<body onload="init();">
<p>Some stuff here</p>
</body>
</html>
Then, this is what I have in databasecalls.js:
alert("file loaded");
function init(){
document.addEventListener("deviceready", phoneReady, false);
}
function phoneReady(){
// **** first, open the database ****
alert("Start making DB object");
dbShell = window.openDatabase("TimeBlogger", "1.0", "TimeBlogger", 20000000);
alert("Created DB object");
//and run another function if the setup is successful (displayEntries)
dbShell.transaction(setupDBTable, errorHandler, getDBProjectEntries)
}
So, unless I am mistaken, I should at the very least get alert(); to run as soon as it is read into index.html, right? I'm not even getting that! Is there something with the phonegap API that I missed... like everything needs to be in index.html or something?
Thanks in advance!
Justin