CODEWITHSUNDEEP
javascriptjquerybackbone.jsjquery-pluginsrequirejs
Seppo420
Seppo420

Reputation: 2241

jQuery plugin not working in a requirejs module

Here's what I have in require.config.shim (in main.js):

'jquery.tabs':{
    deps:['jquery'],
    exports: '$'
},

And here are the relevant parts in my module:

define(['jquery','underscore','backbone','tools','jquery.tabs'], function($,_,Backbone,Tools){

    //SNIP 

    myView = Backbone.View.extend({                
        //SNIP
        render:     function(){
            //SNIP
            var el = tmp.find(".tabholder")
            console.log(el); // not empty
            console.log($.fn.createTabHolder); //not empty

            el.createTabHolder(); //TypeError: el.createTabHolder is not a function
            //el.createPopup();  //different plugin, same error here
            //el.hide();         // this works just fine
            //SNIP
        },
        //SNIP

    });
    //SNIP
});

It works just fine when I'm using Chrome or running it from localhost, but I get "TypeError: el.createTabHolder is not a function" when I run it from server using Firefox (22.0).

Here's the plugin code just in case, it used to work just fine before I switched to using requirejs:

(function (jQuery){
    jQuery.fn.createTabHolder = function (){
        this.html("");
        var tbar = $("<div/>",{
            class:"tabbar padfix noselect"
        });

        tbar.appendTo(this);

        var tholder = $("<div/>",{
            class:"tabcontainer"
        });

        tholder.appendTo(this);


    };

    jQuery.fn.addTab = function(title,data,index, constructor,model,obj){
        var self=this;
        var ts = $("<span/>",{
            class:"tabselector",
            html:title,

        });

        var tab = $("<div/>",{
            class:"tabselector_tab"

        });
        if(data.jQuery)
            tab.append(data);
        else
            tab.html(data);
        tab.appendTo(this.find(".tabcontainer"));
        if(constructor)
            ts.one("click",{element:tab,model:model,obj:obj},constructor);

        ts.on("click",function(){
            self.find(".selectedtab").removeClass("selectedtab");
            tab.addClass("selectedtab");
            self.find(".activetabselector").removeClass("activetabselector");
            ts.addClass("activetabselector");
        });
        if(this.find(".activetabselector").length==0)
            ts.trigger("click");

        ts.appendTo(this.find(".tabbar"));
    }


    return jQuery;
})(jQuery);

No idea what's going on, and can't really provide anything else than that.

Upvotes: 0

Views: 495

Answers (2)

Seppo420
Seppo420

Reputation: 2241

Replaced

var el = tmp.find(".tabholder");

with this:

var el = $(tmp.find(".tabholder"));

and it seems to work now, I have no idea why tho, prob fixed some weird timing issue or something. Trial & error ftw.

Upvotes: 0

mikach
mikach

Reputation: 2427

Maybe there are different versions of jquery there. Try this:

define(['jquery'], function (jQuery){
    jQuery.fn.createTabHolder = function (){

        // ...

    };

});

instead of this:

(function (jQuery){
    jQuery.fn.createTabHolder = function (){

        // ...

    };

})(jQuery);

Upvotes: 1

Related Questions