pnotify refuses to work - javascript

I downloaded the pnotify jquery plugin from Pines Notify
Simply it tells me to add the required js and css files and on document ready the following should work !
$(document).ready(function() {
$.pnotify({
type: 'error',
title: 'Errors found in form',
text: 'Please check all form data, some items were invalid.',
opacity: 0.95,
hide:false,
history: false,
sticker: false
});
});
But it just keeps giving me the error
Uncaught TypeError: Object function (e,t){return new v.fn.init(e,t,n)}
has no method 'pnotify'
And the silliest thing is that im visual VS 2012 and from within the dev environment it shows me pnotify as a function of '$' as intellisense !
What could i be doing wrong ?

with PNotify2.01, you can use it with reguirejs
main.js:
requirejs.config({
paths: {
pnotify: "/Static/plugins/pnotify/pnotify.custom.min"
}
});
Notify.js
define(['pnotify'], function () {
return {
SimpleNotice: function () {
return new PNotify('Check me out! I\'m a notice.');
}
};
});
I copy this from my production code (Durandal framework)

Related

Use i18next with XHR backend in client-side javascript

The documentation at i18next-xhr-backend tells me to use import to load their module. But when I use the import-statement, nothing happens and Firefox gives me a SyntaxError in the developer console:
SyntaxError: import declarations may only appear at top level of a module
So how can I use i18next library with the XHR-backend? The following code example works if the .use(XHR)-line and the corresponding import is commented out (Warning: i18next::backendConnector: No backend was added via i18next.use. Will not load resources.). But it fails, if it is not: ReferenceError: XHR is not defined
//import Fetch from 'i18next-fetch-backend';
let t = null;
i18next
.use(XHR)
.init({
debug: true,
fallbackLng: ['en'],
preload: ['en'],
ns: 'translation',
defaultNS: 'translation',
keySeparator: false, // Allow usage of dots in keys
nsSeparator: false,
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
}, (err, _t) => {
if (err) {
reject(err);
return;
}
t = _t;
//resolve();
});
jqueryI18next.init(i18next, $, {
tName: 't', // --> appends $.t = i18next.t
i18nName: 'i18n', // --> appends $.i18n = i18next
handleName: 'localize', // --> appends $(selector).localize(opts);
selectorAttr: 'data-i18n', // selector for translating elements
targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if different than itself)
optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true
useOptionsAttr: false, // see optionsAttr
parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text
});
$(".nav").localize();
I needed to use i18nextXHRBackend instead of just XHR, since that is the name the class gets loaded as if no loader is used. As the README.md says:
If you don't use a module loader it will be added to window.i18nextXHRBackend
I didn't see that before, and I didn't know that this will happen automatically, but it seems that you have to find that out on your own if not using a module loader. Lesson learned, hopefully this will help some other newbies being stuck on how to use modules in javascript. Therefore, my complete localisation.js looks like this:
$(document).ready(function() {
i18next
.use(i18nextXHRBackend)
.use(i18nextBrowserLanguageDetector)
.init({
debug: true,
backend: {
loadPath: 'locales/{{lng}}/{{ns}}.json',
addPath: 'locales/add/{{lng}}/{{ns}}'
}
}, function(err, t) {
jqueryI18next.init(i18next, $);
$('.translatable').localize();
$('.language-button').click(function() {
i18next.changeLanguage(this.firstElementChild.alt).then(function(t) {
$('.translatable').localize();
$('#signupPassword').pwstrength("forceUpdate");
$('#signupPasswordConfirm').pwstrength("forceUpdate");
});
});
});
});

Unhandled Promise rejection: push.on is not a function

I am using Ionic 2.
I get this Typescrpt error when trying to set up Push Notifications. I have copied this sample code from a tutorial, so would have expected it to work. I must have something wrong. Any ideas please:
Unhandled Promise rejection: push.on is not a function ; Zone: angular ; Task: Promise.then ; Value:
TypeError: push.on is not a function
push.on('registration', function (data) {
typescript
import { Push } from 'ionic-native';
.
.
pushNotifications(): void {
var push = Push.init({
android: {
vibrate: true,
sound: true,
senderID: "xxxxxxxxxxxxxxxxxxx"
},
ios: {
alert: "true",
badge: true,
sound: 'false'
},
windows: {}
});
push.on('registration', (data) => {
console.log(data.registrationId);
alert(data.registrationId.toString());
});
push.on('notification', (data) => {
console.log(data);
alert("Hi, Am a push notification");
});
push.on('error', (e) => {
console.log(e.message);
});
}
Make sure to check if 'window.cordova' is available before using the plugin. Are you actually testing on a device or in browser? Cordova is not available within browser.
EDIT
To make sure your code editor knowns what 'window.cordova' is, make sure you installed cordova typings.
npm install typings -g
typings install dt~cordova --save --global

ko is not defined Error in Chutzpah

I'm trying to write Unit Testing for my SPA project. Where we have used the Durandal (Framework), Knockout (Binding) with RequireJs.
I have installed the Chutzpah in Visual Studio 2012.
When i run my Test for the View Model, it throws me below error, even though the knockout js and other js are loaded correctly.
Uncaught ReferenceError: ko is not defined
My Json Config Code:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"References" : [
{"Path" : "../Scripts/require.js" },
{"Path" : "config.js" }
],
"Tests" : [
{"Path": "tests"}
]
}
My Config Js Code:
require.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'jquery': '../Scripts/jquery-2.1.4',
'knockout': '../Scripts/knockout-3.3.0'
},
shim: {
}
});
My FirstTest.Js Code:
define(['project/modules/Settings/Subscriber/Viewmodels/Channels'],
function (nChannel) {
describe("Get Channels", function () {
it("will check the Get Channels call and result", function () {
var disp = nChannel.getChannels().then(function () {
var actualResult = ko.toJS(nChannel.Channels);
expect(actualResult.length).toEqual(3);
});
});
});
});
ViewModel Code:
define(['plugins/dialog'], function (dialog) {
var subscriberList = ko.observableArray(); //Getting Error here - while loading the Js for Unit Testing
var JsQ = $; //Getting JQUERY members here. // Works good.
//Other Logics goes here
return {
subscriberList : subscriberList,
JsQ : JsQ
};
});
The Configuration for the Jquery works perfect, since knockout also same as that. But gives error.
Any Idea's / Suggestion why the error?
Do i need to load the ko (knockout) separately?
Edit 1:
I have tried changing the knockout to ko it gives me the error Uncaught Error: Script error for: knockout.
Edit 2:
The problem i'm facing when i apply this solution, those existing code file needs the massive changes and the file counts are in hundreds. From Init.Js we have loaded the Jquery and Knockout. Like below.
requirejs.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins'
}
});
define('jquery', [], function () {
return jQuery;
});
define('knockout', [], function () {
return ko;
});
So inside any viewmodel we can get the instance of knockout as ko, without declaring the require js stuff in each veiwmodel for the Knockout (As you suggested).
But when i try the same in Chutzpah declaration this is not working. Not sure why.
Hope you understand the problem.
In both modules you show in your question, you use ko but you do not list knockout in your list of dependencies. This is a sure way to get the error you got. Modify your modules to list knockout in the dependencies, and add a corresponding parameter to the callback you give to define. For instance,
define(['knockout', 'plugins/dialog'], function (ko, dialog) {

Require.js Uncaught TypeError: jqOAuth is not a function

I would like to use jQuery OAuth library in my application.
Right now I'm trying to initialize it in main.js file.
I defined paths for this lib and it's dependency store.js:
requirejs.config({
paths: {
store: "../Scripts/store.min",
jqueryOAuth: "../Scripts/jquery.oauth"
}
});
And I took an example from jQuery OAuth page how to do an initialization:
define(["store", "jqueryOAuth"], function (store, jqOAuth) {
if (!store.enabled) {
alert("Store not enabled");
return;
}
var auth = new jqOAuth({ // <--- Uncaught TypeError: jqOAuth is not a function
events: {
login: function() {},
logout: function() {},
tokenExpiration: function() {}
}
});
});
When I open my website I get the error in console:
Uncaught TypeError: jqOAuth is not a function
But if you take a look at jquery.oauth.js file, you'll see, that there's a function called jqOAuth.
Do you have any idea what I'm doing wrong?
I'm quite new to javascript stuff and maybe I'm missing something?
Turns out, that I was overriding global jqOAuth function with my local variable of the same name.
Here's working code:
define(["store", "jqueryOAuth"], function (store) {
if (!store.enabled) {
alert("Store not enabled");
return;
}
var auth = new jqOAuth({
events: {
login: function() {},
logout: function() {},
tokenExpiration: function() {}
}
});
});

Uncaught TypeError: Object #<Object> has no method 'reopen' (Ember.js)

I'm updating from a prerelease to Ember js 1.0.0. I'm currently getting the title error for
Ember.State.reopen( {
active: false,
enter: function() {
this.set('active', true);
},
exit: function() {
this.set('active', false);
}
});
What causes this error and how do I fix it?
Ember states has been removed since this pull request
You can find it in ember-states github repository

Categories

Resources