CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Mike Marks
Mike Marks

Reputation: 10129

Creating a very simple jQuery plugin, not working

I've never created a jQuery plug-in before. I'm trying it out and keeping it simple for now- here's my plug-in code which is hosted on a CDN in my company:

(function ($) {

    $.fn.displayToastrNotifications = function () {
        alert('test');
    };

})(jQuery);

I'm referencing this JavaScript file inside my page:

<script src="http://server/sites/CDN/Scripts/toastr-notifications.js"></script>

Finally, in the same page, I have:

$(document).ready(function () {
     $.displayToastrNotifications();
});

Am I doing this right? The JavaScript file containing my plug-in code is being brought back to the browser per Firebug. I do not get an alert box when I refresh my page. What am I doing wrong?

EDIT

The console reports an error:

TypeError: $.displayToastrNotifications is not a function

$.displayToastrNotifications();

But, it is a function, at least I think it is...

Upvotes: 3

Views: 51

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

since it is a plugin it need to be invoked in a jQuery wrapper object like

$('body').displayToastrNotifications();

Demo: Fiddle

Upvotes: 4

Pointy
Pointy

Reputation: 413682

No, that's not right. You're adding the function to $.fn, so that means it's something to be used as a method of jQuery objects:

$(something).displayToastrNotifications();

If you want a "global" function like $.ajax, then you'd set it up as just a property of $, not $.fn.

Upvotes: 4

Related Questions