Invoke function from jquery plugin boiler plate code

Question

I have found nice jQuery plugin and it uses boiler plate template. Everything works fine, but I can't invoke internal function to get selected items. The construction of this plugin is below:

    (function ($, window, document) {
    'use strict';

    // constructor
    var SearchableOptionList = function ($element, options) {
        this.$originalElement = $element;
        this.options = options;

        this.metadata = this.$originalElement.data('sol-options');
    };

    // plugin prototype
    SearchableOptionList.prototype = {

        DATA_KEY: 'sol-element',

        // default option values
        defaults: {            
            ... 
        },

        // initialize the plugin
        init: function () {
            this.config = $.extend(true, {}, this.defaults, this.options, this.metadata);

            ...

            return this;
        },

        //some functions
        ...

        selectAll: function () {
            ...
        },

        deselectAll: function () {
            ...
        },

        getSelection: function () {
            return this.$selection.find('input:checked');
        }
    };

    // jquery plugin boiler plate code
    SearchableOptionList.defaults = SearchableOptionList.prototype.defaults;
    window.SearchableOptionList = SearchableOptionList;

    $.fn.searchableOptionList = function (options) {
        var result = [];
        this.each(function () {
            var $this = $(this),
                $alreadyInitializedSol = $this.data(SearchableOptionList.prototype.DATA_KEY);

            if ($alreadyInitializedSol) {
                result.push($alreadyInitializedSol);
            } else {
                var newSol = new SearchableOptionList($this, options);
                result.push(newSol);

                setTimeout(function() {
                    newSol.init();
                }, 0);
            }
        });

        if (result.length === 1) {
            return result[0];
        }

        return result;
    };

}(jQuery, window, document));

Full code you can find on GitHub.

I try to invoke getSelection function like below:

// initialize sol
    var s = $('#my-select').searchableOptionList({
        maxHeight: '150px',
        showSelectAll: true
    });

    s.selectAll();

I get an error:

TypeError: this.config is undefined

Is it possible to invoke functions using this template of boiler plate?

You can play around on jsfiddle

Answer 1

I believe line 1031 is the culprit

        setTimeout(function() {
            newSol.init();
        }, 0);

Since the init is deferred the code is not ready when you call it right away. The esiest fix is to defer your call too, but there is no gurantee that it will be initialized.

setTimeout(function(){s.selectAll()},1000);

The better solution is to use the plugin's events to hook into when it has been initialized.

$('#my-select').searchableOptionList({
  maxHeight: '150px',
  events: {
    onInitialized: function() {
      this.selectAll();
    }
  }
});

fiddle