jQuery plugin: access settings in other public methods

Question

I have a problem and after many search, I still locked. I followed many tutorials on how to create jQuery plugin (started with the jQuery's tutorial "Authoring" which doesn't exists anymore but recommands to create plugin as followed), and nothing is specified about access settings in other public methods of the plugin.

Let the code speak:

;(function($, window, document, undefined) {

    var methods = {
        init: function(options) {
            return this.each(function() {
                var $this = $(this);
                $this.settings = $.extend(true, {}, $.fn.test.defaultSettings, options || {});
                console.log($this.settings);
            });
        },
        update: function() {
            return this.each(function() {
                var $this = $(this);
                console.log($this.settings);
            });
        }
    };

    $.fn.test = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.inlineEdit');
        }
    };

    $.fn.test.defaultSettings = {
        'test': "ok"
    };
})(jQuery, window, document);

Basically, I just try to:

$('body').test(); // displays 'Object {test: "ok"}'
$('body').test('update'); // displays 'undefined'

So, how could I access my settings in my update function ?

Edit: thanks to kalley, just save/retrieve the settings var using data() make it perfectly:

var methods = {
    init: function(options) {
        return this.each(function() {
            var $this = $(this);
            $this.settings = $.extend(true, {}, $.fn.test.defaultSettings, options || {});
            $this.data("test", $this.settings);
            $this.settings.test2 = "that rocks !";
            console.log($this.settings);
        });
    },
    update: function() {
        return this.each(function() {
            var $this = $(this);
            $this.settings = $this.data("test");
            console.log($this.settings);
        });
    }
};

And now:

$('body').test(); // displays 'Object {test: "ok", test2: "that rocks !"}'
$('body').test('update'); // displays 'Object {test: "ok", test2: "that rocks !"}'

Possible duplicate http://stackoverflow.com/questions/1117086/how-to-create-a-jquery-plugin-with-methods — Alkis Kalogeris, Jul 07 '13 at 01:34

score 1 · Accepted Answer · answered Jul 07 '13 at 01:33

1

Try changing your init method to look like this:

var $this = $(this);
$this.data('test', $.extend(true, {}, $.fn.test.defaultSettings, options || {}));
console.log($this.data('test'));

Then in your update, you access it like:

 console.log($this.data('test'));

The reason I used "test" was because that's the name of your plugin. Change as appropriate so that hopefully there won't be any overwriting or other conflicts.

answered Jul 07 '13 at 01:33

kalley

18,072
2
39
36

Thanks, that is what I was searching for! – Pierre Jul 07 '13 at 08:45

jQuery plugin: access settings in other public methods

1 Answers1