fire
fire

Reputation: 21531

Call the same instance of jQuery plugin

I have written a jQuery plugin below and would like to be able to call it again for the same instance on an element.

The plugin goes...

(function($) {
    $.fn.myPlugin = function(options){

        var settings = {
            color: null
        };

        if (options) {  
            $.extend(settings, options);
        }

        return this.each(function(){
            var self = this;
            var pics = $('li', self);

            function refresh() {
                pics = $('li', self);
            };

            $('a', self).click(function(){
                pics.filter(':last').remove();
                alert(settings.color);
                refresh();
                return false;
            });
        });
    }
})(jQuery);

In the page this is called...

$('#test').myPlugin({ color: 'blue' });

Now I want to call the same plugin for the same instance but pass the string refresh as the option whilst all the other variables are the same (so color would still be blue) e.g...

$('#test').myPlugin('refresh');

This would then execute the refresh() function.

How could I achieve that with the above?

Edit: To make it clearer I am thinking of how jQuery UI does their plugins. In the sortable plugin you can do $("#sortable").sortable(); and then $("#sortable").sortable('refresh'); on the same element. This is what I am trying to achieve.

Upvotes: 0

Views: 505

Answers (2)

Korvin Szanto
Korvin Szanto

Reputation: 4501

You can store your instance with .data() and check for it when creating an instance.

Something like:

$.fn.doStuff = function () {
  var ob = $(this);
  var data = ob.data();
  if (data.doStuff !== undefined) {
    return data.doStuff;
  }
  doStuff;
});

Upvotes: 1

Rahul
Rahul

Reputation: 988

(function($) {
$.fn.myPlugin = function(options){
    var init = function($self, ops){
        $self.find("a").click(function(){
            pics.filter(':last').remove();
            alert(settings.color);
            refresh();
            return false;
        });
    };  

    this.refresh = function(){
       //your code here
    };

    return this.each(function(){
        var self = this;
        var pics = $('li', self);
        var settings = {
            color: null
        };    

        var ops = $.extend(true, settings, options);

        init($(this), ops);            

    });
}
})(jQuery);

try something like this. and you can call refresh() like $().myPlugin().refresh();

Upvotes: 0

Related Questions