jQuery Notification Bar

Question

I'm trying to install Noty (a jQuery Notification plugin) on a checkout page (FoxyCart template). I installed the following code in the section of my checkout template:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="http://lavajavamaui.com/js/noty/jquery.noty.js"></script>

<script type="text/javascript" src="http://lavajavamaui.com/js/noty/layouts/top.js"></script>
<script type="text/javascript" src="http://lavajavamaui.com/js/noty/layouts/topLeft.js"></script>
<script type="text/javascript" src="http://lavajavamaui.com/js/noty/layouts/topRight.js"></script>
<!-- You can add more layouts if you want -->

<script type="text/javascript" src="http://lavajavamaui.com/js/noty/themes/default.js">
</script>
<script type="text/javascript">
var noty = noty({text: 'noty - a jquery notification library!'});
</script>

If I understand correctly, this is all that needs to be done to get it to display properly. For some reason, the notification is not popping up. Is there something wrong with this line?

<script type="text/javascript">
var noty = noty({text: 'noty - a jquery notification library!'});
</script>

Here is the page that should have Noty installed.

Answer 1

You are reproducing a bug in the documentation. The line

var noty = noty({text: 'noty - a jquery notification library!'});

if run in a global context, redefines noty , replacing the function noty with the result of the noty function. In theory this first call should work but any subsequent calls to noty will fail because they are trying to call an object as a function. I'm not sure why the first one fails, but it is possible it is related. Try changing the name of the object you are assigning the result to:

var notyObj = noty({text: 'noty - a jquery notification library!'});

That might fix it.

If you don't need to manipulate the notification after you create it you should also be able to just call it without assigning the result to a variable:

noty({text: 'noty - a jquery notification library!'});

Update

If you execute that statement inside a non-global context (such as jQuery's ready event) it will not work because of variable hoisting . Hoisting takes any var statement and moves it to the top of the statement. The statement:

    (function () {
        var noty = noty({text: 'noty - a jquery notification library!'});
    }());

Is turned into:

    (function () {
        var noty; // inside this function noty now refers
                  // to a local variable set to "undefined"

        // JavaScript looks for local variables before it looks at globals,
        // so it will use the new local "noty" when it tries to execute the
        // right side of this line. This will fail because you
        // can't invoke undefined
        noty = noty({text: 'noty - a jquery notification library!'});
    }());