How to access functions in jQuery plugins from outside the plugin?

Question

Take for example a plugin of the form:

jQuery.autocomplete = function(input, options) {
    function abc(){}
    function def(){}
}

The functions run fine and as expected. However, I want to be able to invoke function abc(); from a $(document).ready(function() {}); statement. The following does not work, and I'd really like some advice.

$(document).ready(function() {
    jQuery.autocomplete.abc();
    abc();
    $(this)->abc();
}

Answer 1

When in the init of the plugin there is this...

if( !data ) {
    /* Settings Extraction */
    $.extend(s, defaults, options);
    /* Initialize Code */
    /* Data Storage */
    var YoPlugin = $('<div />', {
        text : $this.attr('title')
    });
    $(this).data('YoPlugin', {
        target : $this,
        myInternalFunction: myInternalFunction,
        settings : $.extend({}, s),
        YoPlugin : YoPlugin
    });
    data = $this.data('YoPlugin');
}

You can expose the internal functions like myInternalFunction has demonstrated. Getting into the object from an event called on say $('body') leaves 'this' unusably as the body, so...

var multiSel = $('.YoPlugin');
var singleSel = multiSel[0]; //or other way to select the singleton or specific plugin enhanced target
var pluginDataObj = $(singleSel).data('YoPlugin');
var func = pluginDataObj['myInternalFunction'];
func();

I suppose adding a link as an external plugin reference is better ie like init: is declared in the plugin or similar routes via $.fn.YoPlugin.myInternalFunction

Anyway this set of snippets exposes a night of R&D to explore and help understand whatzwhat a lir bir betta.

Also you definitely need to read all that you can absorb over here...

http://alexsexton.com/blog/2010/02/using-inheritance-patterns-to-organize-large-jquery-applications/

Answer 2

Your autocomplete function would have to explicitly make those functions available somehow, possibly by putting references to them on some global object. Otherwise, they're completely hidden from the outside world and they cannot be accessed.

Answer 3

In jQuery private functions (like the ones you described in the question) are generally tied to an instance. Inside the function they use a locally scoped variable, or the this keyword to interact with the instance. So, I do not see how calling them from an onload would make sense. If the plugin was developed correctly the author would implement callbacks wherever necessary; the callbacks would be assigned through the instance, however, not globally.

If you are writing this plugin, and want this behavior the syntax could look something like this:

jQuery.autocomplete = function(input, options) {} 
jQuery.autocomplete.abc = function(){};
jQuery.autocomplete.def = function(){};

These functions would be globally accessible trough $.autocomplete .

Answer 4

Ok, when you typed into a box, the jQuery plugin added divs to a tag cloud. Clicking on one of these "tags" added it to a secondary list. Clicking on the secondary list removed the item from the secondary list. I then wanted this click to add the item to the primary list only if it matched the text typed into the box. For this reason, I wanted to run the autocomplete code again. To get around this, I added a secondary function to my private code with a "click" event rather than a "keydown". This allowed me to add a trigger("click") to the divs in the secondary list, which triggered the autocomplete action again. Problem solved. I couldn't have figured this out without all your help guys. Thank you!