Add function to existing JQuery plugin

Question

Is it possible to add a function to a plugin without modifying the actual plugin? Can I do something like this in my site's js file?

$.fn.Watermark.Refresh = function() {
        $.Watermark.HideAll();
        $.Watermark.ShowAll();
    }

or

(function($){
$.fn.Watermark.Refresh = function() {
        $.Watermark.HideAll();
        $.Watermark.ShowAll();
    };
})(jQuery);

neither worked, the first says $ is undefined, the second that jQuery is undefined...

ideas?

Solution: Either method works, just include the jquery file before the site js file.

You should clarify what exactly it is that you want those additional functions to do. How do you want to call them? How are they supposed to interact with existing functions of the plugin? — Pointy
– Pointy, Commented Jan 11, 2011 at 13:35
Sorry, I guess I was even less clear than you thought... I want to define a function called Refresh that calls both HideAll and ShowAll. I know I can just create a standard javascript function to do this, but I thought it would be good to add it in as a function of the pluggin. It's a functionality the pluggin should really have... — kralco626
– kralco626, Commented Jan 11, 2011 at 13:39

Pointy · Accepted Answer · 2011-01-11 13:32:35Z

2

You can add those functions if you want to, but you'll have to make sure that you're also loading jQuery itself and the plugin to be modified. If you're getting those errors (that jQuery or "$" are not defined), then you have not correctly done that.

Now, though it's true that you can add those functions, I have to wonder what the point would be. If I were to do this, for example:

$.fn.css.myFunction = function() { return "hello world"; };

then it would be possible to call it:

var str = $.fn.css.myFunction();

but so what? What good does that do me? I don't think it's very useful.

answered Jan 11, 2011 at 13:32

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

kralco626 Over a year ago

that's what I was thinking, but jQuery is most definitely included as my entire site is done in Jquery/Jquery UI

Pointy Over a year ago

Well, note that scripts on pages are evaluated in the order that they are referenced. If your code comes before the script tags that import jQuery and the plugin, then you get those errors.

kralco626 Over a year ago

yup, realized that as you were posting your comment. I was including my site.js file before the jquery.js file.

kralco626 Over a year ago

And it looks like either of my two methods in my question work perfect so long as the jquery.js is included before the site.js. Thanks!

mekwall Over a year ago

@kralco626 - the second method is preferred and recommended. Creating a closure for your plugin is much better, giving your plugin its own scope to have fun in and at the same time being able to use $ without compatibility issues.

|

Paul · Accepted Answer · 2011-01-11 13:34:03Z

0

Make sure you are including the plugin after jQuery.

answered Jan 11, 2011 at 13:34

Paul

6,2382 gold badges43 silver badges65 bronze badges

Collectives™ on Stack Overflow

Add function to existing JQuery plugin

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related