Windows Universal JavaScript runtime error: 'WinJS' is undefined - javascript

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>

Related

Executing Windows files/events with NW.js (Node Webkit)

I will start by saying I am far from a JavaScript guy. I work more with HTML and CSS, and "dabble" with JavaScript, as in tweak some code to make JQuery code do what I'd like it to on the front-end.
I am having a bit of an issue with a task I am trying to complete, which has led me to using NW.js (Node Webkit) for the first time.
I am trying to create a 4 button user interface that allows for the following 4 events to occur on click:
1. Load a website in a new window
2. Open windows explorer to a specific directory and allow the user to browse
3. Extend Windows Display on a Dual Monitor Setup
4. Clone Windows Display on a Dual Monitor Setup
I was originally pretty much finished and achieved my results easily with an HTML Application file - I know, outdated, but it allowed me to work within my skill set and achieve the tasks I needed fairly easily. Problem wa, it wouldn't allow for CSS3 and the website being opened used it, and it pretty much ruined the look of it as a whole. Sooo I needed something new.
I stumbled across NW.js and have started away on that. I've got my package loaded up, my "app" is now launch-able, but the old script isn't working and I am back to square one. I have no idea how to launch executables in Windows using NW.js - it's driving me bonkers!
Below is the code that worked in the HTML Application file (minus the file explorer, which I had yet to get to before realizing it wouldn't work):
<!DOCTYPE html>
<html>
<head>
<title>My HTML App</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" language="javascript">
function RunPad() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/system32/notepad.exe", 1, false);
}
function RunExtend() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/System32/DisplaySwitch.exe /extend", 1, false);
}
function RunClone() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/System32/DisplaySwitch.exe /clone", 1, false);
}
function RunWebsite() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/Program Files/Internet Explorer/iexplore.exe", 1, false);
}
</script>
</head>
<body>
<div class="container">
<div class="col-1-2"><img src="website.jpg" onclick="RunWebsite();"></div>
<div class="col-1-2"><img src="resources.jpg"></a></div>
<div class="col-1-2"><img src="single_screen.jpg" onclick="RunExtend();"></div>
<div class="col-1-2"><img src="dual_screen.jpg" onclick="RunClone();"></div></div>
</div>
</body>
</html>
I'm really stuck on this and am not sure which route to take to complete this with NW.js
Any help would be appreciated.
ActiveXObject is for IE/Edge only so it won't work under Chromium (used by NW).
What you can do though is create individual Vbs scripts for each of your ActiveXObject functions and call/execute them as required with node.js (supported by NW) in this way...
function RunExtProgram(ProgName){
require('child_process').exec(ProgName,function(error,stdout,stderr){if(error!==null){alert('Unable to launch process:<br><br>'+stderr+'<br><br>'+ProgName);}});
}
Usage example:
RunExtProgram('C:/test/abc.vbs');

Cordova plugins undefined

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>

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.

Ember.js tutorial and guide - DS not defined, Ember.State moved to plugin

I'm trying to learn Ember, but I'm quickly figuring out that the guide sucks. It leaves out very key components.
I keep getting one of two errors:
Uncaught Error: Ember.State has been moved into a plugin: https://github.com/emberjs/ember-states
and,
Uncaught ReferenceError: DS is not defined
Here is how I have my scripts laid out:
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.3.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/ember-states.js"></script>
<script src="js/app.js"></script>
The error I get depends if I comment out ember-data.js or ember-states.js.
In the end, it always errors. Why?
I know where you're coming from - similar problems over here, it's a bit bumpy in the beginning.
Finally I used yeoman in the end and did the setup using the yeoman ember-generator for doing the project setup and creating models/controller/... have the feeling, it makes things much easier.
The given setup loads the following javascript order (added version numbers manually).
<script src="jquery/jquery.js"></script> <!-- v.20.03 -->
<script src="handlebars/handlebars.runtime.js"></script> <!-- v 1.3.0 -->
<script src="ember/ember.js"></script> <!-- v. 1.2.0 -->
<script src="ember-data-shim/ember-data.js"></script> <!-- v. 1.0.0-beta.4 -->
Hopefully it helps...
Have you defined your application adapter e.g App.ApplicationAdapter = DS.FixtureAdapter.extend();?
Also when i changed the directions of scripts.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"> </script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>
I also got ds.not defined, when i moved ember-data to the last item on list it got fixed

jQuery Mobile & TouchSwipe jQuery Plugin Errors

I'm trying to use the TouchSwipe plugin from Skinkers Labs in combination with jQuery Mobile on a mobile website that I'm creating that also utilizes responsive design.
TouchSwipe:
http://labs.skinkers.com/touchSwipe/
The situation I'm running into is I can get the TouchSwipe plugin working fine with a normal page on a mobile device but once I add the jQuery Mobile js file the TouchSwipe functionality no longer functions.
This is the JS error that I receive (on line 3256 of jquery-1.7.1.js):
TypeError: 'undefined' is not a function (evaluating '(
(jQuery.event.special[ handleObj.origType ] || {}).handle ||
handleObj.handler ) .apply( matched.elem, args )')
Here is where I include the JavaScript within my HTML:
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$("#divCheckingWrapper").live("pagecreate", function(event) {
var swipeOptions = {
swipeStatus: swipeStatus,
allowPageScroll: "vertical"
};
SWIPEABLE_NODES = $("#divCheckingSlider");
SWIPEABLE_NODES.swipe(swipeOptions);
CONTENT_WIDTH= SWIPEABLE_NODES.parent().width();
MAX_NODES = SWIPEABLE_NODES.find("div.divCheckingSliders").length;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0-rc.1.min.js"></script>
main.js includes all of the helper functions within the Image Swipe example code from the TouchSwipe site:
http://labs.skinkers.com/touchSwipe/demo/image_scroll.php
Any idea why I'm seeing this error? As soon as I remove the jQuery Mobile javascript file the plugin works fine but I need jQuery Mobile for this site.
I'll gladly post more code if you'd like. Let me know if you have any questions or need more info.
Thanks in advance for your help!
You're going about it the wrong way. You're loading JQM after TouchSwipe, though TouchSwipe is supposed to override JQM. It's like building the windows before the walls.
I've tested and things work normally without any need to change any naming. All you need to do is to include JQM before TouchSwipe.
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe-1.2.5.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
I ended up giving up on TouchSwipe and using the iosSlider Plugin which seems to work much better and I did not run into any problems while using it in combination with jQuery mobile.
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
Hopefully this will help someone else with the same issue.
This is due to a clash within the jqm namespace. Both touchSwipe and jqm use the same 'swipe', 'swipeleft', etc names. I changed the names in the touchSwipe plugin with a quick search-replace in order to get rid of the problem. Obviously this is not an ideal solution, but it works.

Categories

Resources