Call function inside nested jquery plugin
There are many topics related to my question, and I went through most of them, but I didn't get it right. The closest post to my question is this:
How to call functions nested inside jQuery plugin?
Below is the jquery plugin. When resizing, the dimensions of the elements are recalculated. I am now trying to call the resizeBind () function from outside the jquery plugin and it gives me the error
I tried the following combinations to call the function
$. Fn.splitter (). ResizeBind ()
$. Fn.splitter.resizeBind ()
Any ideas where I'm going 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);
source to share
I had the same problem. These answers to related posts didn't work for me either. I solved this in a round using events.
The example below demonstrates a call to a function that multiplies three internal data values by a given factor and returns the result. To call a function, you call an event. The handler, in turn, raises another event that contains the result. You need to set up a listener for the result event.
Here the plugin is basically the standard jQuery plugin architecture created by the 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 the 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 the multiplier value to it. You can enter it in the console - or call it using a button that displays the multiplier from another UI element.
$('body').trigger('get_multiplied_data_please', 7);
Disclaimer;) - I'm new to jQuery - sorry if this is using a hammer to crack a nut.
source to share
You have defined the resizeBind function in a non-global scope. If you are not using any other javascript framework or anything else using the $ function (to prevent conflict) you can remove
(function($){
...
})(jQuery);
and this way the function will be called everywhere without errors
source to share