Hi I have this javascript code which I would like to call the refresh method in my init function but I can’t seems to be able to call it. What is the proper way of doing this?
$.fn.plug = function() {
this.init = function( ) {
this.refresh()
}
this.refresh = function( ) {
alert("call")
}
Thanks in advanced.
‘this’ is a reference to the current function being executed, and you’ve used it in the wrong context. An easy way around it is to store the reference to the function:
$.fn.plug = function() {
var self = this;
self.init = function( ) {
self.refresh()
}
self.refresh = function( ) {
alert("call")
}
};
With what you’ve provided there, how do you propose that he calls the plug() method so as to run the init function?
Thank you Paul and Anthony, I’ll have a read and try on that.
I edited my post re-stating your advice for the jQuery plugin methods (looks like I neglected to save the changes). Creating a plugin with functions assigned like this is a bad idea because ‘this’ refers to the jQuery collection object and not the calling plugin function. So the short answer is, he couldn’t with any safety.
If the plugin had to contain several methods that were quite complicated and the methods had to be available externally I’d probably lean towards creating a custom object:
function moreComplicated(selector) {
this.$collection = $(selector);
this.refresh();
}
moreComplicated.prototype.refresh = function(){
alert('call');
};
var whatever = new moreComplicated('body');
If I use the jquery way, how do I then call the inner method?
Given the example:
(function( $ ){
var methods = {
init : function( options ) {
// How do I call refresh? this.refresh() doesn't work.
// this.tooltip ("refresh"); also doesn't work
},
refresh : function( content ) {
alert("test")
}
};
$.fn.tooltip = function( method ) {
// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
Do you see this bit?
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
When you call the plugin with no parameters, or with an object, the init method will be called automatically for you.
$().tooltip()
or
$().tooltip({someProp: ‘someValue’})
This part of the code allows different behaviour:
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call(
If you want to run the refresh method, you would call the plugin with the string ‘refresh’
$().tooltip(‘refresh’)
and you can also pass any number of parameters after the ‘tooltip’ string too
$().tooltip(‘refresh’, someValue, anotherValue)
or if you prefer to pass them as an object:
$().tooltip(‘refresh’, {someProp: someValue, anotherProp: anotherValue})
Thanks alot for the detail explaination Paul!
On the other question of:
They are in the methods object, so from within your plugin you would use methods.refresh() to call that function.
The this keyword is a reference to the jQuery object.
Using this.tooltip(‘refresh’) should work (and does in my test), but methods.refresh() is the preferred usage.
Do you want to investigate the this.tooltip thing more closely?
Thanks Paul! Just saw your reply, I didn’t realize I can use methods.refresh? Currently even in the methods, I use $( ).tooltip(“refresh”), I’ll try this in a while.
By the way, how about setting and passing global variables? Global variables meaning inside the plugin itself. Like for example:
(function($) {
// defining some plugin global variables
var state = null;
var methods = {
init : function( opts ) {
state = 0; // example
},
refresh: function( opts ) {
if( !state ) state = 1; // example
}
}
})
Currently I’m using it this way. Is it correct?
Yes, that’s a good way to use it.