Cordova plugins undefined - javascript

I am trying to use the ZeroConf plugin for Cordova.
I never used any Cordova plugin before.
These are the steps I did :
cordova create myApp
cordova platform add android
cordova platform add ios
cordova platform add browser
cordova plugins add https://github.com/cambiocreative/cordova-plugin-zeroconf
Afterwards, I changed the default onDeviceReady function so that "index.js" file (in the myApp/www/ directory) looks as follow :
var app = {
...
onDeviceReady: function() {
app.receivedEvent('deviceready');
if(cordova && cordova.plugins) {
console.log('cordova.plugins is available');
} else {
console.log('cordova.plugins NOT available');
}
},
...
};
app.initialize();
Unfortunately it always logs "cordova.plugins NOT available". I first checked if cordova exists and it does, however, cordova.plugins is undefined. Note that i'm testing this in the browser (cordova run browser) to find the problem, once cordova.plugins won't be undefined anymore I will be able to use the ZeroConf plugin.
I searched for hours, read a lot of similar topics but none could help for me.
What I tried :
cordova plugin ls --> ZeroConf plugin is present com.cambiocreative.cordova.plugin.zeroconf 1.0.9 "Cordova ZeroConf Plugin"
Verified that index.html loads the cordova.js script
I edited the config.xml file (in myApp/www/config.xml) and added <plugin name="com.cambiocreative.cordova.plugin.zeroconf" version="1" /> , but that did not helped. Also tried <feature name="ZeroConf"><param name="android-package" value="com.cambiocreative.cordova.plugin.ZeroConf" /><param name="onload" value="true" /></feature> without success.
This is the order in which i include the scripts in index.html (in myApp/www/index.html) :
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
EDIT : I tried accessing the ZeroConf object directly from the "zeroconf.js" file, without success.
I edited onDeviceReady function :
onDeviceReady: function() {
app.receivedEvent('deviceready');
var el = document.getElementById("zcOK");
if(typeof ZeroConf !== 'undefined') {
el.innerHTML = "ZEROCONF READY";
} else {
el.innerHTML = "ZEROCONF NOT READY";
}
}
But this displays "ZEROCONF NOT READY"...
This is how my index now look like (i only added a paragraph with id="zcOK" to display the above).
<p id="zcOK">ZeroConf test</p>
<!-- ORDER IN WHICH THE SCRIPTS ARE LOADED -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="../plugins/com.cambiocreative.cordova.plugin.zeroconf/www/zeroconf.js"></script>
<script type="text/javascript" src="js/index.js"></script> <!-- Contains the onDeviceReady function -->
However, now I don't know if "ZeroConf" is undefined because there is some problem with the plugin or because it would not be accessible from within "index.js" because it was included in "index.html" ?

Examining the config.xml and the JS file of cordova-plugin-zeroconf I found this declaration:
<js-module src="www/zeroconf.js" name="ZeroConf">
<clobbers target="cambiocreative.CDVZeroConfig" />
</js-module>
So the plugin API should be available at this name space: cambiocreative.CDVZeroConfig
In fact as of Cordova Plugins documentation:
... tags are allowed within <js-module>:
<clobbers target="some.value"/> indicates that the module.exports is
inserted into the window object as window.some.value. You can have as
many <clobbers> as you like. Any object not available on window is
created.
...

Probably the plugins that you are including dont use the cordova.plugin window. Just try to call the plugin functions, and check if they work.

For those who faced (cordova.plugins === undefined), but it's 100% should be.
/src/plugins/plugin_name/plugin.xml
Find tag like this:
<js-module src="www/plugin_name.js" name="Plugin_name">
<clobbers target="cordova.plugins.plugin_name" />
</js-module>
/scr/config.xml
If the tag doesn't exist just copy-paste it before </widget>

Related

jquery not working well on node-webkit

I am practicing node-webkit as a nodejs beginner.
My main page is a simple html page including a main.js script
I've installed jquery using npm install jquery
index.html
<!-- index.html -->
...
<script src="js/main.js"></script>
</head>
<body>
<div id="demo">Hi! </div>
</body>
</html>
main.js
// main.js
const $ = require('jquery')
$(document).ready(function () {
$('#demo').click(function () {
$(this).text($(this).text() + 'Hi! ')
})
})
If I load jquery in my index.html like <script src="path/to/jquery.js"></script> it works well, but if I require jquery in my main.js it doesn't!
I've already tested:
main.js is properly including and working with native js methods (like document.getElementById('demo').onclick = ...)
Other node modules or libraries such as vue, lodash or natives like fs, url work well. So require function works good.
While I'm requiring jquery as above, inline <script>s doesn't work as well.
Also I realized $(document).ready(...) works! But the real problem is that $('#demo') is undefined! (I checked the console-I'm using SDK version of node-webkit)
I don't know if it's because of node-webkit or something else I'm missing?
found the solution,
I should define jquery like this:
window.$ = window.jQuery = require('jquery')
this is simply because of variable scopes in ECMAS
so if I define it like this, I can use it everywhere

Windows Universal JavaScript runtime error: 'WinJS' is undefined

I've this app created with cordova/ionic and angularjs. It's using google maps etc. I managed to make a working windows phone 10 build in VS2015 last week and today was going to make release build but surprise mf it just had stopped working for no apparent reason. Started giving me WinJS undefined. My index.html header looks like this before build:
<script src="cordova.js"></script>
<script src="js/ionic.bundle.min.js"></script>
<script src="js/requirejs/require.js"></script>
<script src="js/app.js"></script>
and while debugging DOM explorer shows this header
<script src="cordova.js"></script>
<script src="/www/WinJS/js/base.js"></script>
<script src="js/ionic.bundle.min.js"></script>
<script src="ms-appx-web://companyName.appName/www/cordova_plugins.js"></script>
<script src="js/requirejs/require.js"></script>
<script src="js/app.js"></script>
so WinJs seems to be included. By inspecting cordova.js with breakpoints I can see that window.WinJS is undefined and script is added with:
if (!window.WinJS) {
var scriptElem = document.createElement("script");
if (navigator.appVersion.indexOf('MSAppHost/3.0') !== -1) {
// Windows 10 UWP
scriptElem.src = '/www/WinJS/js/base.js';
...}
scriptElem.addEventListener("load", onWinJSReady);
document.head.appendChild(scriptElem);
and it still crashes at this point
var onWinJSReady = function () {
var app = WinJS.Application;
.... }
I've seen similar problems here and there but those are for windows phone 8.1. I've no clue anymore what is going on here. My W10 phone updated itself just before the app broke but I doubt it's just coincidence(?)
Have to answer my own question. The app got running by adding manually WinJS script BEFORE cordova script.
<script src="/www/WinJS/js/base.js"></script>

CDN fallback issue

I was confused whether to use cdn or not , so i went through these links link1 and link2
And they told to use local scripts as a fallback from cdn
So i kept this code
<script src="https://secure.skypeassets.com/i/scom/js/skype-uri.js" async></script>
<script>
window.Skype || document.write('<script src="javascripts/skype-uri.js" async>\x3C/script>')
</script>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
window.angular || document.write('<script src="javascripts/angular.min.js">\x3C/script>')
</script>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
<script>
window['angular-animate'] || document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
</script>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
<script>
window['angular-aria'] || document.write('<script src="javascripts/angular-aria.min.js">\x3C/script>')
</script>
<!-- -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<script>
window['angular-material'] || document.write('<script src="javascripts/angular-material.min.js">\x3C/script>')
</script>
The issue is it gets local files and gets same file from cdn too.
When i hit the page and monitor through charles proxy (or any other network monitoring tool)
Kinda weird but am not able to figure out the issue here.
The fallback for script using window.angular || /* fallback code*/ looks fine and should work (works for me).
Keep in mind the test doesn't refer to the script name but checks if a known global variable that should be set if the script has been loaded in fact exists. So for other scripts you need to know what global variables they set (if any) or what methods/properties they add to existing objects and check for them.
BTW the async flag on your Skype script will break this kind of test because there's a good chanse the check for Skype will execute before the browser fetches and parses the external script.
As for the stylesheet fallback this works fine (even when the local copy also fails - browsers somehow handle this problem ;)):
<link rel="stylesheet" href="//cdnurl/style.css" onerror="this.href='localcopy.css'" />
Edit: to check for angular modules you can use angular.module('moduleName') in a try-catch block (inspired by this answer):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
<script>
try {
angular.module('ngAnimate')
} catch(e){
document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
}
</script>

local notification plugin does only work in index.html - Cannot read property 'notification' of undefined

Hi I am developing a cordova App (Cordova 3.4.0) and want to display a notification. I installed the local notification plugin like it is described here: https://github.com/katzer/cordova-plugin-local-notifications . Somehow displaying the notification does only work in the index.html file. See here:
<html>
<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/lib/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/lib/jquery.mobile-1.4.2.js">
<script type="text/javascript">
$(document).ready(function(){
document.addEventListener("deviceready", function() {
// window.plugin.notification.local.add({ message: 'Great app!' }); // Works
location = "nextPage.html";
}, false);
})
</script>
</head>
</html>
But after calling location = "nextPage.html"; the exactly same code on the other page won't work anymore. I get this error:
Error: Cannot read property 'notification' of undefined.
Any ideas why window.plugin is undefined? my nextPage.html looks exactly like the html above except that I commented out - location = "nextPage.html"; - and commented in - window.plugin.notification.local.add({ message: 'Great app!' }); - . They are in the same folder and I do implement cordova, jquery and jquery mobile.
I got this entry in my config.xml:
<feature name="LocalNotification">
<param name="android-package" value="de.appplant.cordova.plugin.localnotification.LocalNotification" />
</feature>
Any ideas about what I did wrong? Thanks in advance. Please let me know if you need more information.
this occurs because not load all libraries JS that you need.
i've a app, that use plugin notification as soon open it and also asynchronous, but a strange razon plugin notificacion not load.
I solved revising the order to load JS.
Revise how and where you load libraries.
I hope this help you.

Uncaught TypeError: Cannot read property 'version' of undefined at file

For saving canvas image to gallery i tried by creating plugin along with below piece of javascript code in phonegap, but after button click i got "Uncaught TypeError: Cannot read property 'version' of undefined at file:///android_asset/www/index.html:18"
for the code
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="SavePhotoPlugin.js"></script>
<link rel="stylesheet" href="index.css" />
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('myCanvas');
}
function share() {
var canvas = document.getElementById("myCanvas");
window.savephotoplugin(canvas,"image/png",device.version,function(val){
//returns you the saved path in val
alert("Photo Saved: " + val);
});
}
</script>
</head>
<body>
<div >
<IMG SRC="loadin.png" ALT="some text" WIDTH=100 HEIGHT=100>
<button class="button" id="myCanvas" onclick="share()">SAVE </button>
</div>
i tried with cordova 2.2, 2.9 for all the version the remains the same, tested on 2.3 version device. is this problem with the cordova version of device, or some other issue, please anybody point out mistake.
Latest versions of jQuery no longer support browser detection. Most recommend feature detection over browser detection these days.
You need to revert to jQuery libraries previous to 1.9, use the jQuery migrate plugin, or modify your JavaScript code referencing the browser version to something different like Modernizr.
Like already mentioned in the comment, you should run your code that accesses the device only after the deviceready event has fired.
Another problem is that you define a device variable inside your share() function. This will overwrite the cordova device object even if you run this after deviceready. So remove the line var device.

Categories

Resources