call function inside a nested jquery plugin

Question

There are many topics related to my question and i have been through most of them, but i haven't got it right. The closest post to my question is the following:

http://stackoverflow.com/questions/1042072/how-to-call-functions-that-are-nested-inside-a-jquery-plugin

Below is the jquery plugin i am using. On resize, the element sizes are recalculated. I am now trying to call the function resizeBind() from outside of the jquery plugin and it gives me error

I tried the following combinations to call the function

$.fn.splitter().resizeBind()

$.fn.splitter.resizeBind()

Any ideas, where i am getting wrong?

;(function($){  
$.fn.splitter = function(args){
//Other functions ......

$(window).bind("resize", function(){        
resizeBind();  
});

function resizeBind(){  
   var top = splitter.offset().top;
   var wh = $(window).height();
   var ww = $(window).width();
   var sh = 0; // scrollbar height   
if (ww <0 && !jQuery.browser.msie ) 
    sh = 17;   
    var footer = parseInt($("#footer").css("height")) || 26; 
    splitter.css("height", wh-top-footer-sh+"px");
 $("#tabsRight").css("height", splitter.height()-30+"px");      
 $(".contentTabs").css("height", splitter.height()-70+"px");    
 } 
return this.each(function() {
});
};
})(jQuery);

Answer 1

resizeBind function is defined as private so you cannot access it from outside of it's scope. If you want to use it in other scopes you need to define it like that

$.fn.resizeBind = function() { ... }

Then you would call it like that $(selector').resizeBind()

Answer 2

You have defined the resizeBind function in a scope that is different from the global scope. If you dont'use another javascript framework or anything else that uses the $ function (to prevent conflict) you can delete the

(function($){ 

...

})(jQuery);

statement and in this way the function will be callable everywhere without errors

Answer 3

I didn't test it:

this.resizeBind = function() { .... }

Answer 4

I had the same problem. Those answers on related posts didn't work for my case either. I solved it in a round about way using events.

The example below demonstrates calling a function that multiplies three internal data values by a given multiplier, and returns the result. To call the function, you trigger an event. The handler in turn triggers another event that contains the result. You need to set up a listener for the result event.

Here's the plugin - mostly standard jQuery plugin architecture created by an online wizard:

(function($){

    $.foo = function(el, options){

        // To avoid scope issues, use 'base' instead of 'this'
        var base = this;
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        // Add a reverse reference to the DOM object
        base.$el.data("foo", base);

        base.init = function(){

            base.options = $.extend({},$.foo.defaultOptions, options);

            // create private data and copy in the options hash
            base.private_obj = {};
            base.private_obj.value1 = (base.options.opt1);
            base.private_obj.value2 = (base.options.opt2);
            base.private_obj.value3 = (base.options.opt3);


            // make a little element to dump the results into
            var ui_element = $('<p>').attr("id","my_paragraph").html(base.private_obj.value1 +" "+ base.private_obj.value2+" " +base.private_obj.value3);
            base.$el.append(ui_element);                


            // this is the handler for the 'get_multiplied_data_please' event. 
            base.$el.bind('get_multiplied_data_please', function(e,mult) {  
                bar = {};
                bar.v1 = base.private_obj.value1 *mult;
                bar.v2 = base.private_obj.value2 *mult;
                bar.v3 = base.private_obj.value3 *mult;
                base.$el.trigger("here_is_the_multiplied_data", bar);
            });

        };

        base.init();
    }


    $.foo.defaultOptions = {
        opt1: 150,
        opt2: 30,
        opt3: 100
    };

    $.fn.foo = function(options){
        return this.each(function(){
            (new $.foo(this, options));
        });
    };

})(jQuery);

So, you can attach the object to an element as usual when the document is ready. And at the same time set up a handler for the result event.

$(document).ready(function(){   
    $('body').foo();

    $('body').live('here_is_the_multiplied_data', function(e, data){
        console.log("val1:" +data.v1);
        console.log("val2:" +data.v2);
        console.log("val3:" +data.v3);
        $("#my_paragraph").html(data.v1 +" "+ data.v2+" " +data.v3);
    });
})

All that's left is to trigger the event and pass it a multiplier value You could type this into the console - or trigger it from a button that picks out the multiplier from another UI element

$('body').trigger('get_multiplied_data_please', 7);

Disclaimer ;) - I'm quite new to jQuery - sorry if this is using a hammer to crack a nut.