Question

I’m making a plugin (my first one, sorry if messy 😉 ) for jquery, everything works fine, except for events. Events always apply to the last element, no matter what. if only one element everything works great, but with two or more elements events crash.

I’ve been looking through similar cuestions, but I can’t find the solution to mine.

the code is on:

http://jsbin.com/itajow/edit#javascript,html

and the demo is in

http://jsbin.com/itajow

just filter or go through pagination to see the problem.

Thanks in advance!!

Answer 1

The self variable used in the methods was used in different ways – somewhere it was made a local variable (var self = this within the method) and other places it was used as a variable with a lifetime outside of the method (by omitting var). I don’t know if this was intentional to gain some other effect, but making the variable local fixed the problem of paging only happening to the last element.

The updated code is at http://jsbin.com/itajow/11/edit

Note: the declaration addNav:function(self) takes in the self object, but it’s called both with and without a parameter in the code, so the first line of the function fixes this by doing self = self || this.

Edit

To make the list filtering work, the event binding may be rewritten as follows:

self.$elem.find(".beautableFilter").on("keyup", function() {
    var input = $(this).val(); //this == the input element
    self.addFiltrado(input);
});

and the addFilterado method should take input as a parmeter rather than find it itself.

(the code, to keep it here on SO)

// JavaScript Document
// requiere pubsub!!
// requiere contains insensitive!!
jQuery.expr[":"].contains=function(a,i,m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
(function(a) { var b=a({});a.subscribe=function() { b.on.apply(b,arguments); },a.unsubscribe=function() { b.off.apply(b,arguments); },a.publish=function() { b.trigger.apply(b,arguments); } })(jQuery);

if(typeof Object.create!=='function') {
    Object.create=function(obj) {
        function F() { }
        F.prototype=obj;
        return new F();
    };
}

(function($,window,document,undefined) {
    var Beautable={
        init: function(options,elem) {
            var self=this;

            self.elem=elem;
            self.$elem=$(elem);

            self.$elem.addClass("beautable");

            self.ncols=self.$elem.find("th").size();
            self.nrows=self.$elem.find("tr").size()-1;

            if(options===undefined) {
                options={};
            }
            self.options=$.extend({},$.fn.beautable.options,options);

            self.subscribeTo();
            self.addFooter();
            if(self.options.filtro) { self.addHeader(); }
            self.addData();

            if(self.options.multicheck) { self.multicheckFn(); }
            if(self.options.showTotal) { self.showTotal(); }
            if(self.options.maxRows>0) { self.addNav(); }

            self.bindEvents();

            //self.hideRows(3,4);
        },
        subscribeTo: function() {
            //$.subscribe('twitter.getTweets', Twitter.cleanTweets);
            //$.subscribe('twitter.gotTweets', Twitter.attachTemplate);
        },

        bindEvents: function() {
            var self=this;
            if(self.options.multicheck) {
                self.$checkPadre.on("click",function() {
                    self.multicheckEvent();
                });
            }
            if(self.options.maxRows>0&&self.nrows>self.options.maxRows) {
                self.$elem.find(".beautableButton").on("click",function() {
                    self.buttonClicked($(this));
                });
            }
            if(self.options.filtro) {
              self.$elem.find(".beautableFilter").on("keyup", function() {
                var input = $(this).val(); //this == the input element
                self.addFiltrado(input);
              });
            }
        },
        multicheckFn: function() {
            var self=this;
            self.$checks=self.$elem.find("input[type='checkbox']");
            self.$checkPadre=self.$checks.eq(0);

            self.$checkPadre.attr("checked",false);
        },
        multicheckEvent: function() {
            var self=this;
            self.$checks.attr("checked",self.$checkPadre.is(':checked'));
        },

        showTotal: function() {
            var self=this;
            self.$elem.find("tfoot tr td").append('<div class="floatedl">Total: '+self.nrows+' filas</div>');
        },
        addFooter: function() {
            var self=this;
            self.$elem.find("tbody").after('<tfoot><tr><td colspan="'+self.ncols+'">&nbsp;</td></tr></tfoot>');
        },
        addHeader: function() {
            var self=this;
            self.$elem.find("thead").prepend('<tr><th colspan="'+self.ncols+'"><div class="floatedr"><input type="text" placeholder="Filtrar..." class="beautableFilter"></div></th></tr></tfoot>');
        },

        addData: function() {
            var self=this;
            nrowsdata=0;
            $.each(self.$elem.find("tbody tr"),function() {
                $(this).data("nrow",++nrowsdata);
            });
        },
        buttonClicked: function($bt) {
            var self=this;
            page=$bt.data("page");
            maxp=self.options.maxRows*page;
            minp=maxp-self.options.maxRows+1;
            self.hideRows(minp,maxp);
            self.$elem.find(".beautableButton").removeClass("selected");
            $bt.addClass("selected");
        },
        hideRows: function(minR,maxR) {
            var self=this;
            $.each(self.$elem.find("tbody tr"),function() {
                if($(this).data("nrow")<minR||$(this).data("nrow")>maxR) { $(this).hide(); } else { $(this).show(); }
            });
        },
        addNav: function(self) {
            self=self||this;
            if(self.nrows>self.options.maxRows) {
                self.npages=Math.ceil(self.nrows/self.options.maxRows);
                self.$elem.find(".navi").remove();
                buttons="";
                for(i=1;i<=self.npages;i++) {
                    buttons+="<div class='beautableButton' data-page="+i+">"+i+"</div>";
                }
                self.$elem.find("tfoot td").append('<div class="floatedr navi">'+buttons+'</div>');
                self.buttonClicked($(".beautableButton").eq(0));
            }
        },
        addFiltrado: function(input) {
            var self=this;
            clearTimeout(self.timer);
            if(input.length>0) {
                self.timer=setTimeout(function() {
                    self.filtrar(input);
                },100);
                self.$elem.find("tfoot .navi").hide();
            } else {
                self.$elem.find("tfoot .navi").show();
                self.filtrar(input);
                self.addNav(self);
            }
        },
        filtrar: function(busqueda) {
            self=this;
            self.$elem.find("tbody tr").hide();
            self.$elem.find('tbody tr td:contains("'+busqueda+'")').filter(function() { $(this).parent().show(); });

        }

    };

    $.fn.beautable=function(options) {
        return this.each(function() {

            var beautable=Object.create(Beautable);
            beautable.init(options,this);
        });
    };

    $.fn.beautable.options={
        multicheck: true,
        showTotal: false,
        sumatorio: "",
        paginated: false,
        maxRows: 0,
        filtro: false
    };

})(jQuery,window,document);