pnotify prompt dialog not showing in an ember project

Question

I'm using the pnotify error and success dialogs without any trouble, but the prompt dialog doesn't want to show. I get a Uncaught TypeError: Cannot read property 'addClass' of undefined error.

Has anybody been successful in getting this to work?

jsbin: pnotify with ember

Answer 1

Here is a working example: http://jsbin.com/fuqoke/1/

So what is the problem. Well, Ember uses prototype extensions. This polyfills ECMAScript 5 array methods in browsers that do not implement them, adds convenience methods and properties to built-in arrays, and makes array mutations observable. The problem is that pnotify expects to work with normal oldschool javascript arrays. For example this code snippet where it wants to loop over an array:

...
for (var i in options.buttons) {
 btn = options.buttons[i];
...

This loop will also iterate over the methods added to arrays by Ember (e.g. addObjects, firstObject,....)

So 2 ways to solve this:

1) You modify the pnotify code, and contribute it ;), with a more robust implementation to loop arrays

        ...
        for (var i = 0; i < options.buttons.length; i++) {
            btn = options.buttons[i];
        ...

or

        ...
        for (var i in options.buttons) {
           if(options.buttons.hasOwnProperty(i)){
            btn = options.buttons[i];
            ...  

2) You disable Ember's prototype extensions, which I don't recommend. Here you can find more info:http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/ but it will get you in a lot of trouble.

To be short it is definitely a bug in pnotify.