Question

I have a script that I didn’t write already running on a page. I’d like to, in a script I did write, be able to execute a function from the original script. Here’s a simplified example of what I’m trying to do:

(function ($) {
$.fn.myExistingFunction = function (options) {
    function doMyThing(text) {
        alert(text);
    }
}
}(jQuery));

jQuery(document).ready(function($) {
    $.fn.myExistingFunction.doMyThing("alert text");
});

However, when I run this, I get the console output:

Uncaught TypeError: Object function (options) {

    function doMyThing(text) {
       alert(text);
    }

} has no method 'doMyThing'

But it clearly has the method! I can see it right there. What am I getting wrong here?

Answer 1

You can only access that method from the scope of the plugin function. It is not defined in the global scope.

So you can’t call that function. All you can do in your code is call functions that are available through what’s called the scope chain where the function is called. In your case that is everything that is either defined in your function($){} or in global scope. But the function in the plugin is neither.

When you call $.fn.myExistingFunction.doMyThing you are treating doMyThing like an field in the myExistingFunction object. But actually it is defined inside the function. Maybe this code makes it clearer:

$.fn.myExistingFunction = function (options) {
    var doMyThing = function(text) {
        alert(text);
    }
    var hi = "hello";
}

In hi and doMyThing are local variables in the scope of myExistingFunction. If the plugin wasn’t designed to expose the functionality to external code you can’t access the variables.

An example of a plugin that was designed to expose some of its internal functions would be the jQuery UI datepicker (documentation). It needs functions like parseDate and formatDate interally, but these utility functions are likely to be useful for general development as well, which is why they have been added to the datepicker object explicitly.