Noty (notification library) is not defined - AngularJS Web Application - javascript

I currently am in the process of making an AngularJS web application from scratch and am new to AngularJS, which is important to note because I could always be missing something fundamental.
The issue is this:
I have installed the Noty library (npm install noty) and wrote code for a simple Noty dialog:
var confirmSubmit = new Noty({
text: 'Your feedback has been submitted!',
buttons: [
Noty.button('Close', 'btn btn-default', function() {
confirmSubmit.close();
})
]
});
This code is inside a working, already integrated JavaScript file other than the main app.js. Format:
(function() {
var app = angular.module('JStest-reviews', []);
...
})();
However, when I launch the web application in Chrome, I get the following error in the console:
Uncaught ReferenceError: Noty is not defined
The official documentation (https://ned.im/noty/#/installation) has little to no description of what is needed aside from installing Noty and creating a Noty object. I have tried using other statements provided in the installation documentation like:
import Noty from 'noty'; or const Noty = require('noty'); before the object creation, but none have resolved the error.
Since my web app was made from scratch, a package.json file was not automatically created, and I wonder if code is needed in there to make this work (right now my manually created one just has name, version, etc. info).
Thank you in advance for suggestions/solutions
I appreciate your time and help.

Approximate answer given by #Phil:
Noty script inclusions should contain the actual path to the Noty library files.
e.g. for me, the fix was:
<link href="node_modules/noty/lib/noty.css" rel="stylesheet">
<script src="node_modules/noty/lib/noty.js" type="text/javascript"></script>
instead of just:
<link href="lib/noty.css" rel="stylesheet">
<script src="lib/noty.js" type="text/javascript"></script>
(From official documentation https://ned.im/noty/#/installation)

Related

Having trouble loading ApexCharts using RequireJS

I'm working with Tabler (tabler.io) trying to migrate some of the templates into my own CMS installation. The problem I'm running into is that I'm trying to load all of the scripts using RequireJS (requirejs.org), and ApexCharts (apexcharts.com) is not loading properly. The relevant parts of my RequireJS config are as follows:
requirejs.config({
shim:{
'apexcharts':{'exports':'ApexCharts'}
},
paths:{
'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.amd'
}
});
It is my understanding that by identifying the exports parameter, RequireJS binds the module to the window object, but in Dev Tools window.ApexCharts is undefined, even though the script shows as being loaded. I've tried both the apexcharts.min.js and apexcharts.amd.js scripts and no luck with either.
I have code later on in the project that depends on ApexCharts being loaded but it doesn't pass the existence check for ApexCharts. The sample below doesn't completely run because $(window).ApexCharts is undefined.
requirejs(['jquery','apexcharts'],function($,ApexCharts){
$(document).ready(function(){
$(window).ApexCharts && (new ApexCharts($('#chart-revenue-bg'), {...})).render();
});
});
The original template from Tabler.io uses the apexcharts.min.js script, but as a result of my research into issues with RequireJS, I came across the following Issue reported on Github and tried the apexcharts.amd.js script as well as a result:
Loading using Require.js (AMD) broken #357
Anyone have insight into what I'm doing wrong here? (I'm not seeing any errors in the console, so I'm stumped)
CODEPEN example illustrating issue: https://codepen.io/cjholowatyj/pen/eYBZmrb
paths:{
'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.min',
'capexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.common',
}
and then:
define(["capexcharts", "apexcharts"], function (c, ApexCharts) {
});
see this link: https://codepen.io/waleed3amer/pen/GRMNYaQ

Unable to load a js framework while the authors demo works without problems

I'm trying to use formio and a 3-rd party framework formio-export but I'm having trouble getting started.
The author provided a sample of the framework on his github page. Demo can be found here.
I've tried to recreate a simple demo using HTML/JS.
I was able to create the form, load a submission on demand, but I'm unable to get the print functionality working. When I press the print button, I get the error:
Uncaught ReferenceError: FormioExport is not defined
at HTMLButtonElement. (:47:21)
at HTMLButtonElement.dispatch (index.js:3)
at HTMLButtonElement.elemData.handle (index.js:3)
A fiddle for your convenience.
I would expect the formio-export to 'just work' once the script tag is added but maybe it requires some additonal configs?
You can't use it in the browser directly. You must use node in order to import the module
import FormioExport from 'formio-export';
and then use
npm run build
to make a browser bundle (as explained in the github page).

How can I Integrate dialog-polyfill into my React app?

I'm using Firebase and FirebaseUI in my React app for phone number registration. As you can see at http://brigadesaffinitywebapp-dev.herokuapp.com it works well on Google Chrome desktop but as soon as I try to use another navigator the country code selector doesn't work and throws an error : undefined is not an object (evaluating 'window.dialogPolyfill.registerDialog'). So I guess I need to integrate https://github.com/GoogleChrome/dialog-polyfill but I'm having a hard time figuring out how.
I tried to npm install dialog-polyfilland then import dialogPolyfill from 'dialog-polyfill but I still get the error. Maybe it has something to do with the fact that I'm not currently attaching the instance to the windowobject ?
I guess there is no reasons to complicate things... Just had to put this a the top of index.html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.7/dialog-polyfill.js"></script>
<script>
var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);
// Now dialog acts like a native <dialog>.
dialog.showModal();
</script>

How to integrate tesseract OCR with Cordova/Phonegap app

Im trying use tesseract OCR with my app and by instructions posted here
http://scn.sap.com/community/developer-center/front-end/blog/2015/05/15/create-an-ocr-android-app-with-cordova-and-tesseract
several times I followed the instructions but with no success.When im inspecting code with Google Chrome Dev console thru the WebVieW it give me
Uncaught SyntaxError: Unexpected token }
in file tesseractPlugin.js:11
thats located somewhere in
file:///android_asset/www/plugins/com.tesseract.phonegap/tesseractPlugin/tesseractPlugin.js
and
Uncaught Error: Module com.tesseract.phonegap.tesseractPlugin.TesseractPlugin does not exist.
in cordova.js:1431
witch i think means the cordova cant find the plugin but i dont know why.I think it's something with the version of Cordova and its access to plugins
its frustrating because there are no other options on the web and i dont know how to write my own cordova plugin.
I would also like to add that I created the project exactly as instructed to avoid the mistakes and over I have found that it is not possible to download the plugin by git from
https://github.com/engzhaowei/Tesseract-phonegap-android-example/tree/master/plugins/com.tesseract.phonegap.tesseractPlugin
so i downloaded full package and fetch plugin from
C:\xxx\plugins\com.tesseract.phonegap.tesseractPlugin
There is tessaract js http://tesseract.projectnaptha.com/
which is a javascript library and you can use it and will work for phonegap its very easy to implement.
Just reference the cdn script in the header and call the code snippet it should work. Be warned actress is slow.
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
var myimage = document.getElementById("largeImage").src;
Tesseract.recognize(myimage)
.then(function(result){
// console.log(result);
document.getElementById("textarea1").value = result.text; // assign results to a textbox

Rally app SDK 2.0rc1 - Uncaught ReferenceError: rally is not defined

Long time SO reader, first time questioner. I'm fairly new to coding in JavaScript and I'm working on a Rally app. I'm trying to "update" existing items, so I figured I'd set up the datasource at the beginning of the app, like this:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.rallyDataSource = new rally.sdk.data.RallyDataSource("__WORKSPACE_OID__",
"__PROJECT_OID__",
"__PROJECT_SCOPING_UP__",
"__PROJECT_SCOPING_DOWN__");
However, on page load, the Chrome console is showing me "Uncaught ReferenceError: rally is not defined". I checked the HTML to ensure there was a reference to sdk.js, and there is:
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
I've searched around and attempted some solutions, but nothing seems to work. Any one else run into this or know what it causing it?
Edit: To clarify, I am testing this within the Rally workspace in which it will be used. I have comboboxes correctly loading and populating with Release and User Story info, so I know it is able to communicate.
rixo is on the right track above. Basically, you're trying to use sdk 1.x code (rally.sdk.data.RallyDataSource and the hangman variables) from the sdk 2.x.
SDK 1.x is deprecated but the docs are still available here: https://help.rallydev.com/app-sdk
SDK 2.x is the preferred platform and its docs are here: https://help.rallydev.com/apps/2.0rc2/doc/
Both of those resources contain a bunch of guides for getting started and whatnot.
Shouldn't that be Rally.sdk.data with a capital 'r'?

Categories