Develop Reference

Using "this" inside named function on a jQuery plugin

I'm trying to write a simple jQuery plugin and I need some code to run on both load and window resize so I wrote a function inside the plugin.
jQuery(document).ready(function($) {
(function( $ ) {
$.fn.responsiveNav = function() {
function enable_responsive_nav() {
if( this.hasClass('class') ) {
//do stuff
}
}
$(window).resize(function(e) {
enable_responsive_nav();
});
enable_responsive_nav();
return this;
};
}( jQuery ));
$('nav').responsiveNav();
The problem is 'this' doesn't seem to be recognized inside the function. I tried passing it as a function argument:
enable_responsive_nav( this )
...but then I get an error on the console saying hasClass() 'is not a function'.
I guess I could do it without the function out and then bind the window resize event outside the plugin, but I'm trying to keep that to a single call and I'm sure that what I'm missing is very simple.

One common solution is to create a local variable called that or self in the scope where this has the expected value, and then to refer to the local variable in the scope of the inner function:
(function( $ ) {
$.fn.responsiveNav = function() {
var self = this; // local variable
function enable_responsive_nav() {
if( self.hasClass('class') ) { // self is in scope
//do stuff
}
}
$(window).resize(function(e) {
enable_responsive_nav();
});
enable_responsive_nav();
return this;
};
}( jQuery ));
$('nav').responsiveNav();

I tried passing it as a function argument:
enable_responsive_nav( this )
Let's follow the chain through:
jQuery will call your event callback with this referencing the DOM element (not jQuery object) that the event was hooked on. So you can do this:
enable_responsive_nav( $(this) );
...with
if( arg.hasClass('class') ) {
//do stuff
}
Or
enable_responsive_nav.call(this);
with
if($(this).hasClass('class') ) {
//do stuff
}

Passing parameters to a jQuery closure not working on Multisuggest plugin

I have a question of which someone might find this much simpler than I do, but alas, I don't have much experience with custom jQuery plugins.
The previous developer at my place of work left me with a lot of left-over plugins that don't seem to work very well, most which I've been able to fix but this which has been bugging me for a while.
It is a custom Multiple Suggestion plugin (called multisuggest) written in jQuery, and it has a set of functions that it uses internally (*e.g. setValue to set the value of the box, or lookup to update the search)*
It seems he's tried to call these plugin functions from an external script (this exteranl script specifically imports newly created suggestions into the multisuggest via user input and sets the value) like this:
this.$input.multisuggest('setValue', data.address.id, address);
This seems to call the function as it should, except the second and third parameters don't seem to be passed to the function (setValue receives nothing), and I don't understand how I can get it to pass these. It says it is undefined when I log it in the console. The functions are set out like this (I've only including the one I'm using and an internal function from multisuggest called select that actually works):
MultiSuggest.prototype = $.extend(MultiSuggest, _superproto, {
constructor : MultiSuggest,
select: function () { // When selecting an address from the suggestions
var active, display, val;
active = this.$menu.find('.active');
display = active.attr('data-display');
val = active.attr('data-value');
this.setValue(display, val, false); // This works, however when I do it as shown in the above example from an external script, it doesn't. This is because it doesn't receive the arguments.
},
setValue : function(display, value, newAddress) { // Setting the textbox value
console.log(display); // This returns undefined
console.log(value); // This returns undefined
if (display && display !== "" &&
value && value !== "") {
this.$element.val(this.updater(display)).change();
this.$hiddenInput.val(value);
this.$element.addClass("msuggest-selected");
}
if(newAddress === false){
return this.hide();
}
},
});
Why does it listen to the function, but not the values passed to it? Do I need to include an extra line of code somewhere to define these arguments?
Anyone with jQuery experience would be of great help! This is bottlenecking progress on a current project. Thanks for your time!
EDIT:
I've missed out the code of how the arguments are trying to be passed from the external script to the internal function of the plugin. Here is the plugin definition with how the external call is handled, can anyone see a problem with this?
$.fn.multisuggest = function(option) {
return this.each(function() {
var $this = $(this), data = $this.data('multisuggest'), options = typeof option === 'object' && option;
if (!data) {
$this.data('multisuggest', ( data = new MultiSuggest(this, options)));
} else if (typeof(option) === 'string') {
var method = data[option];
var parameters = Array.prototype.slice.call(arguments, 1);
method.apply(this, parameters);
}
});
};

The "usual" plugin supervisor looks like this :
// *****************************
// ***** Start: Supervisor *****
$.fn.multisuggest = function( method ) {
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 in jQuery.' + pluginName );
}
};
// ***** Fin: Supervisor *****
// ***************************
All the looping through this should be inside the method functions, not in the supervisor.
I'm a little worried that new MultiSuggest(...) appears in the current supervisor. That sort of thing is totally unconventional. The original author clearly had something in mind.

You need to extend the jQuery plugin function which is attached to $.fn['multisuggest'], that function is probably only taking and passing one parameter.

A template for a jQuery plugin with options and accessible methods?

I am want to build a plugin with accessible methods and options, this for a complex plugin.
I need the methods to be accessible outside the plugin because if somebody ads something to the DOM it needs to be updated(so we dont need the run the complete plugin again).
I have seen in the past that there are plugin that do it like this, but I cant find them, so I cant take a look at them. I am still new to javascript so any help would be nice.
It would be nice if we still can globally override the options.
How I want to use the plugin:
// options
$('#someid').myplugin({name: 'hello world'});
// methods(would be nice if we can use this)
$('#someid').myplugin('update');
// my old plugin wrapper
;(function($, window, document, undefined){
$.fn.pluginmyPlugin = function(options) {
options = $.extend({}, $.fn.pluginmyPlugin.options, options);
return this.each(function() {
var obj = $(this);
// the code
});
};
/**
* Default settings(dont change).
* You can globally override these options
* by using $.fn.pluginName.key = 'value';
**/
$.fn.pluginmyPlugin.options = {
name: '',
...
};
})(jQuery, window, document);
Update
So after looking at the jQuery docs I have build the following code, please let me know if there's something wrong with the code, if it can be build better...
;(function($, window, document, undefined){
var methods = {
init : function( options ) {
options = $.extend({}, $.fn.pluginmyPlugin.options, options);
return this.each(function(){
alert('yes i am the main code')
});
},
update : function( ) {
alert('updated')
}
};
$.fn.pluginmyPlugin = function(method) {
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 this plugin' );
}
};
/**
* Default settings(dont change).
* You can globally override these options
* by using $.fn.pluginName.key = 'value';
**/
$.fn.pluginmyPlugin.options = {
name: 'john doe',
//....
};
})(jQuery, window, document);

An alternative:
var Plugin = function($self, options) {
this.$self = $self;
this.options = $.extend({}, $.fn.plugin.defaults, options);
};
Plugin.prototype.display = function(){
console.debug("Plugin.display");
};
Plugin.prototype.update = function() {
console.debug("Plugin.update");
};
$.fn.plugin = function(option) {
var options = typeof option == "object" && option;
return this.each(function() {
var $this = $(this);
var $plugin = $this.data("plugin");
if(!$plugin) {
$plugin = new Plugin($this, options);
$this.data("plugin", $plugin);
}
if (typeof option == 'string') {
$plugin[option]();
} else {
$plugin.display();
}
});
};
$.fn.plugin.defaults = {
propname: "propdefault"
};
Usage:
$("span").plugin({
propname: "propvalue"
});
$("span").plugin("update");
This absurdly resembles the Twitter Bootstrap's JavaScript template. But, it wasn't completely taking from there. I have a long history of using .data().
Don't forget to wrap it appropriately.

If you want to use the plugin like this:
// Init plugin
$('a').myplugin({
color: 'blue'
});
// Call the changeBG method
$('a').myplugin('changeBG')
// chaining
.each(function () {
// call the get method href()
console.log( $(this).myplugin('href') );
});
or if you need independent Plugin instance per element:
$('a').each(function () {
$(this).myplugin();
});
you will want to setup your plugin like this:
/*
* Project:
* Description:
* Author:
* License:
*/
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {
// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
// can no longer be modified.
// window is passed through as local variable rather than global
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).
var pluginName = "myplugin",
// the name of using in .data()
dataPlugin = "plugin_" + pluginName,
// default options
defaults = {
color: "black"
};
function privateMethod () {
console.log("private method");
}
// The actual plugin constructor
function Plugin() {
/*
* Plugin instantiation
*
* You already can access element here
* using this.element
*/
this.options = $.extend( {}, defaults );
}
Plugin.prototype = {
init: function ( options ) {
// extend options ( http://api.jquery.com/jQuery.extend/ )
$.extend( this.options, options );
/*
* Place initialization logic here
*/
this.element.css( 'color', 'red' );
},
destroy: function () {
// unset Plugin data instance
this.element.data( dataPlugin, null );
},
// public get method
href: function () {
return this.element.attr( 'href' );
},
// public chaining method
changeBG: function ( color = null ) {
color = color || this.options['color'];
return this.element.each(function () {
// .css() doesn't need .each(), here just for example
$(this).css( 'background', color );
});
}
}
/*
* Plugin wrapper, preventing against multiple instantiations and
* allowing any public function to be called via the jQuery plugin,
* e.g. $(element).pluginName('functionName', arg1, arg2, ...)
*/
$.fn[pluginName] = function ( arg ) {
var args, instance;
// only allow the plugin to be instantiated once
if (!( this.data( dataPlugin ) instanceof Plugin )) {
// if no instance, create one
this.data( dataPlugin, new Plugin( this ) );
}
instance = this.data( dataPlugin );
/*
* because this boilerplate support multiple elements
* using same Plugin instance, so element should set here
*/
instance.element = this;
// Is the first parameter an object (arg), or was omitted,
// call Plugin.init( arg )
if (typeof arg === 'undefined' || typeof arg === 'object') {
if ( typeof instance['init'] === 'function' ) {
instance.init( arg );
}
// checks that the requested public method exists
} else if ( typeof arg === 'string' && typeof instance[arg] === 'function' ) {
// copy arguments & remove function name
args = Array.prototype.slice.call( arguments, 1 );
// call the method
return instance[arg].apply( instance, args );
} else {
$.error('Method ' + arg + ' does not exist on jQuery.' + pluginName);
}
};
}(jQuery, window, document));
Notes:
This boilerplate will not use .each() for every method call, you
should use .each() when you need
Allow re-init plugin, but only 1
instance will be created
Example of destroy method is included
Ref: https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/jQuery-boilerplate-and-demo

Have you tried the jQuery UI Widget Factory?
There was a bit of a learning curve, but I love it now, handle the options, and defaults and allows methods, keeps everything wrapped up tight very fancy :)
EDIT
The jQuery UI Widget Factory is a separate component of the jQuery UI Library that provides an easy, object oriented way to create stateful jQuery plugins.
– Introduction to Stateful Plugins and the Widget Factory.
I don't think the extra overhead is much to be worried about in most circumstances. These days I write in coffescript and everything is compiled, minified and gzipped, so a few extra lines here and there doesn't make much of a difference. My research in website speed seems to indicate that the number of HTTP requests is a big deal - indeed the former colleague that put me on this track worked for a browser based game and was all about speed speed speed.

Here is the latest boilerplate https://github.com/techlab/jquery-plugin-boilerplate
Also you can use the create-jquery-plugin npm CLI utility. just run
npx create-jquery-plugin

How to call function in another js file or trigger a custom event that passes a parameter as data object in Jquery?

I'm using reuqireJS and am struggling to call a function, which is in a js file I'm requiring. My main app.js "controller" requires (plugin)app.js, which handles all plugin configuration and plugin related functions.
This is from app.js
define([], function(){
var start = function() {
require(['jquery', 'overrides', 'jqm', 'multiview', 'respond'],function() {
// globals
var
// PROBLEM attempt at an external plugin function object
dataTablesExt = {},
...;
// call for (plugin)app.js
enhanceDataTables =
function( page, from ) {
var datatable = page.find('.table-wrapper table');
if ( datatable.length > 0 && datatable.jqmData('bound') != true ) {
datatable.not(':jqmData(bound="true")')
.each( function() {
var that = $(this),
tblstyle = that.jqmData("table-style");
that.jqmData('bound', true);
require(['services/datatables/app'], function (App) {
// this calls (plugin)app.js
App.render({style: tblstyle, table: that });
});
});
}
};
// PROBLEM - try to call function "Hello" inside datatables.app
anotherFunc=
function( page, from ) {
dataTablesExt.sayHello("john");
};
I guess my problem is how to set up the global variable dataTablesExt, so I can "fill" it with functions to be called globally. Here is what I'm trying inside (plugin)app.js:
define(['services/datatables/app', 'services/datatables/datatables.min'], function( app, datatables ) {
function render(parameters) {
...
// the function I want to call
function helloName( name ){
alert( name );
};
// I'm trying to add this function to the global "dataTablesExt"
dataTablesExt.sayHello = helloName;
}
But... doesn't work. I'm always getting:
dataTablesExt.sayHello is not a function
Question:
Can someone point me to what I'm doing wrong? If this is not possible, what would be an alternative.
I was thinking to trigger a custom event, but I would have to set up an object to pass along with the event, which I have no clue how to do.
Thanks for help!

Got it. I need to attach dataTablesExt to a global variable I'm using and not declare it as a variable. So like this:
// globals
var
...;
$.dataTablesExt = {};
Then I can assign functions to it and call them.

jQuery / javascript argument handling question

First of all I don't know how to phrase the question "title", sorry if I am confusing everyone with the title here.
Anyway, I saw this code at jQuery http://docs.jquery.com/Plugins/Authoring
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text : $this.attr('title')
});
// If the plugin hasn't been initialized yet
if ( ! data ) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target : $this,
tooltip : tooltip
});
}
});
},
destroy : function( ) {
return this.each(function(){
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition : function( ) { // ... },
show : function( ) { // ... },
hide : function( ) { // ... },
update : function( content ) { // ...}
};
$.fn.tooltip = function( method ) {
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 );
My question being is that I cannot understand why do we need this if statement?
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
}
Or in other words, in what scenario that we will pass in argument like "methods[method]" base on the example?
Thanks!

That if statement will check if you are trying to call one of the methods available to the plugin. In the case of you example you have these methods:
init, destroy, reposition, show, hide, and update
So you can do a call like :
$.tooltip('init', { arg1: true, arg2: 'a value' });
Then your code knows where to send the arguments because this if statement will be true:
if(methods['init'])

You see at the beginning that the code defines an object methods.
The function $.fn.tooltip = function( method ) accepts an argument with name method (no s at the end).
The function will execute one of the methods defined in methods, but it can only do it, if this method is also available. Hence the if(methods[method]).
The expression will be true if method is e.g. show, hide, update, etc, i.e. if the methods object has a property with the name contained in method.
Therefore the expression will be false for foo or bar. If the if statement would not be there, the code would try to call method['foo'], which does not exist and you would get an error:
TypeError: object is not a function
Is this what you wanted to know?

Your code snippet isn't complete and it doesn't contain a demo to show how it's called, so it's hard to give a definite answer.
However, here's what I think from what the code looks like:
The if statement is necessary because the tooltip function will be called with arguments such as init, destroy, show, hide, update, which refer to the functions defined in the methods hash. You probably call tooltip with init to initialize the tooltip, hide to hide it, show to show it etc. If you don't pass an argument at all, it defaults to the init method and initializes the tooltip (second branch of the if).

First of all, the piece of code declares an hashmap named methods which contains some functions.
Then, the second part declares a function named tooltip which takes a parameter named method. This parameter is the name of the function we want to call, this name is the index of this function in the methods array.
So, when you do $('#whatever').tooltip('destroy'); it will look in the methods array for the function referenced with the destroy key.