I'm trying to write a simple jQuery plugin that follows similar structure to the one below. The problem I'm having is that when I initialize the plugin the value plugin.myValue is set to 1 however when I try to access that value in the talk function it's undefined. Can anyone help me refine this plugin structure so when I set values on the plugin object they can be accessed in different methods.
Please keep in mind that the plugin below is not my actual use case it is just a simple example to illustrate the problem I'm having.
My actual use case would be very long because it is a jQuery carousel that I'm writing. If it will help I can provide that code however it's much longer and the below example follows the same flow. I would initialize this plugin with the following code:
$('#Div1').talk({ message: "test message" });
$('#Div1').talk('talk');
(function ($) {
$.fn.talk = function(method) {
var settings = {};
var $el = $(this);
var plugin = this;
var methods = {
init: function(options){
settings = $.extend(true, settings, this.talk.defaults, options);
return this.each(function() {
plugin.myValue = 1;
});
},
talk: function(){
helpers.talk(settings.message);
}
}
var helpers = {
talk: function(message){
if (plugin.myValue == 1)
{
alert(message);
}
}
}
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 talk plugin!');
}
}
$.fn.talk.defaults = {
message: "default message"
}
})(jQuery);
When you define a plugin, this refers already to the jquery object (not the dom element), so I think your plugin var should go en each element, like this:
(function ($) {
$.fn.talk = function(method) {
var settings = {};
var $el = this; //Not need of $() here
var methods = {
init: function(options){
settings = $.extend(true, settings, this.talk.defaults, options);
return this.each(function(index, item) {
item.myValue = 1; //check this
});
},
talk: function(){
helpers.talk.call(this, settings.message); //talk needs scope
}
}
var helpers = {
talk: function(message){
var $elems = this;
if ($elems[0] && $elems[0].myValue == 1) //Something like this
{
alert(message);
}
}
}
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 talk plugin!');
}
}
$.fn.talk.defaults = {
message: "default message"
}
})(jQuery);
I hope you get my idea. Don't forget that your selector might match to more than one element. You were stroring the data to the jquery object, and don't forget that it's a different one each time you call $("#yourDiv"), so your data was lost.
Note: It'd be cleaner to do $(item).data('myValue', 1); instead of item.myValue = 1; (and its proper retrieval), but it's a matter of choice
EDIT Option 2. This may look more similar to your code, but will work only when your selector only matched a single element
(function ($) {
$.fn.talk = function(method) {
var settings = {};
var $el = this; //Not need of $() here
var methods = {
init: function(options){
settings = $.extend(true, settings, this.talk.defaults, options);
$el.data("myValue", 1);
},
talk: function(){
helpers.talk(settings.message);
}
}
var helpers = {
talk: function(message){
if ($el.data("myValue") == 1)
{
alert(message);
}
}
}
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 talk plugin!');
}
}
$.fn.talk.defaults = {
message: "default message"
}
})(jQuery);
Hope this helps. Cheers
Related
how to correctly make callback in jquery plugin.
(function($) {
var parameter = {
first:'1',
second:'2',
call: $.noop
};
var something = 'yes';
var testf = function(){
// i neeed launch callback here;
var something_else = something + 'no';
alert(something_else)
}
$.fn.sadstory = function(options) {
if (options && typeof options === 'object')
{
$.extend(parameter, options);
}
testf();
return this;
}
})(jQuery);
and i need atccess var and owerwrite or making somthing else with him.
$('elm').sadstory({
call: function(){
this.something = 'no';
}
});
and result would by alert box with text nono instead of yesno, now to make this callback correctly.
i think you can do it like that:
$.fn.sadstory = function(options,callback) {
if (options && typeof options === 'object')
{
$.extend(parameter, options);
}
testf();
// example, var c is passed to callback function
var c= "abc";
callback(c);
return this;
}
you can call like
.sadstory({..},function(c) {
console.log(c) // logs "abc"
})
should also work as property of options
this.something doesn't exist. The only something is a variable with the scope of your testf method.
A solution is to pass an object as a parameter to the callback, and allow the callback to modify this object.
(function($) {
var parameter = {
first:'1',
second:'2',
call: $.noop
};
var something = 'yes';
var testf = function(){
// Initialize the string to a default value
var stringGenerationParams = { something: 'yes' };
// Allow the callback to modify the string generation params
parameter.call(stringGenerationParams);
// At this point, stringGenerationParams.something may have been
// modified by the callback function
var something_else = stringGenerationParams.something + 'no';
alert(something_else)
}
$.fn.sadstory = function(options) {
if (options && typeof options === 'object')
{
$.extend(parameter, options);
}
testf();
return this;
}
})(jQuery);
And now, this will work:
$('elm').sadstory({
call: function(e) {
e.something = 'no';
}
});
I have a jQuery Plugin which accept multiple elements and some methods to be called like:
(function($){
methods = {
init : function( options, callbacks) {
$.fn.myPlugin.settings = $.extend({
'userDefinedMethod': function() {}
}, options);
return this.each(function(){
$.fn.myPlugin.settings.userDefinedMethod();
}
}
}
$.fn.myPlugin = 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 exists on jQuery.myPlugin' );
}
}
})(jQuery);
An simple example which will make you understand what I want to achieve:
$(document).ready(function(){
$('#myElement1, #myElement2, #myElement3').myPlugin({
userDefinedMethod: function() {
// I want here to use the elements in selector
$(this).css('color', 'black');
}
});
});
I know that $(this) in the example above will represent the jQuery Plugin Object but I want somehow to use each element in the provided selector.
$(document).ready(function () {
$('#myElement1, #myElement2, #myElement3').myPlugin({
userDefinedMethod: function () {
// I want here to use the elements in selector
$(this).css('color', 'red');
}
});
});
(function ($) {
methods = {
init: function (options, callbacks) {
//don't set the settings to shared object
this.settings = $.extend({
userDefinedMethod: $.noop
}, options);
return this.each($.proxy(function (idx, el) {
//use Function.call() to set a custom execution context
this.settings.userDefinedMethod.call(el);
}, this))
}
}
$.fn.myPlugin = 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 exists on jQuery.myPlugin');
}
}
})(jQuery);
Demo: Fiddle
In methods.init function this will be the jQuery object obtained by quering the selector. So, if you want to send this to userDefinedMethod just use apply or call when you call that function:
...
var methods = {
init : function( options, callbacks) {
$.fn.myPlugin.settings = $.extend({
'userDefinedMethod': function() {}
}, options);
$.fn.myPlugin.settings.userDefinedMethod.call(this);
// or if you want to send the arguments
// $.fn.myPlugin.settings.userDefinedMethod.apply(this, arguments);
return this;
}
}
...
Also, don't forget that you didn't use var for declaring methods. methods will become a magic global variable...
I also corrected the missing ) that was generating a syntax error.
JSFIDDLE
Here is my problem.
I am using Backbone js and every collection I have defined requires the same check on save or destroy. Except that the destroy success functions need to be passed an element to remove from the page when the destroy succeeds.
I didn't want to copy and paste the same code into every save or destroy method so I created this:
window.SAVE_TYPE_DESTROY = 'destroy';
window.SaveResponseHandler = function(el,type){
if (!type){
this.success = function() {
this._success();
};
}else if (type == window.SAVE_TYPE_DESTROY){
this.success = function() {
this._success();
$(el).remove();
};
}
};
SaveResponseHandler.prototype._success = function(model, response, options) {
if ((response.success * 1) === 0) {
persistError(model, {
responseText: response.message
}, {});
}
};
SaveResponseHandler.prototype.error = persistError;
var saveResponseHandler = new SaveResponseHandler();
And I use it like this:
destroy: function() {
var el = this.el;
var model = this.model;
this.model.destroy(new SaveResponseHandler(el,'destroy'));
},
change: function() {
this.model.set({
job_category_name: $($(this.el).find('input')[0]).val()
});
var viewView = this.viewView;
this.model.save(null, saveResponseHandler);
}
The problem is when success is called I get the following error:
Uncaught TypeError: Object [object Window] has no method '_success'
Any help will be much appreciated. I'm also open to any suggestions on better ways to handle this.
this inside of SaveResponseHandler.success isn't SaveResponseHandler, it's window.
window.SaveResponseHandler = function(el, type) {
var self = this;
if (!type) {
this.success = function() {
self._success();
};
} else if (type == window.SAVE_TYPE_DESTROY) {
this.success = function() {
self._success();
$(el).remove();
};
}
};
http://jsfiddle.net/ethagnawl/VmM5z/
I have been trying to learn how to build jQuery plugins, so I'm still new at this. Since this is my first plugin, I decided I would try a simple collapsible panel/box (you can only read so much, right?). I'm having difficulty accessing my reference to my Javascript class object when the click event triggers. I know that this inside of the event refers to the element that triggered the event. I also know that I can do something like _self = this; before the event, but that will only cache the last object from the collection. Does anyone have any suggestions on how I can keep a reference to the class object?
Thanks!
Here is my code.
HTML code
<div class="mypanel" title="Panel 1">Testing panel 1</div>
<div class="mypanel" title="Panel 2">Testing panel 2</div>
$('.mypanel').collapsiblePanel();
Plugin code
var contentVisible = 'showContent', contentNotVisible = 'hideContent';
;(function($) {
var pluginName = 'collapsibleBox';
function Plugin(element, options) {
this.ele = element;
this.$ele = $(element);
var _self = this;
this.options = $.extend({}, $.fn[pluginName].defaults, options);
this.init();
/* Expose methods of Plugin we wish to be public.
* This gets stored when the plugin is created
*/
return {
option: this.option,
destroy: this.destroy
/* Other public methods here */
}
}
$.fn[pluginName] = function(options) {
/* If the first parameter is a string, treat this as a call to a public method. */
if(typeof arguments[0] === 'string') {
var methodName = arguments[0];
var args = Array.prototype.slice.call(arguments, 1);
var returnVal;
this.each(function() {
/* Check that the element has a plugin instance, and that
* the requrested public method exists.
*/
if($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
/* Call the method of the Plugin instance, and Pass it the supplied arguments */
returnVal = $.data(this, 'plugin_' + pluginName)[methodName].appy(this, args);
}
else {
$.error('Method ' + methodName + ' does not exist on jQuery.' + pluginName);
}
});
if(returnVal !== undefined) {
/* If the method returned something, return it */
return returnVal;
}
else {
/* Otherwise, returning 'this' preserves chainability */
return this;
}
}
/* If the first parameter is an object (options), or was omitted,
* instantiate a new instance of the plugin
*/
else if(typeof options === 'object' || !options) {
return this.each(function() {
/* Only allow the plugin to be instantiated once */
if(!$.data(this, 'plugin_' + pluginName)) {
/* Pass options to Plugin constructor, and store Plugin
* instance in the element's jQuery data object
*/
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
}
};
$.fn[pluginName].defaults = {
onInit: function() {},
onDestroy: function() {}
};
Plugin.prototype = {
init: function() {
this.createContentArea();
this.createTitleBar();
this.hook('onInit');
},
createContentArea: function() {
/* ... */
},
createTitleBar: function() {
/* ... */
this.$title.click(function() {
if(this.$ele.data('state') == contentVisible) { // The problem is here
this.collapse();
}
else {
this.expand();
}
});
},
expand: function() {
this.$content.slideDown();
this.$ele.data('state', contentVisible);
},
collapse: function() {
console.log(this);
this.$content.slideUp();
this.$ele.data('state', contentNotVisible);
},
/* Use this function to get/set variables */
option: function (key, val) {
if(val) {
this.options[key] = val;
}
else {
return this.options[key];
}
},
destroy: function () {
/* ... */
},
hook: function (hookName) {
if(this.options[hookName] !== undefined) {
this.options[hookName].call(this.ele);
}
}
};
})(jQuery);
I have managed to fix this issue using a combination of the .data() method and the .call() method to ensure that the context of the function call is always the parent element. I managed to get this working using the pattern I had as well as using the pattern suggested by the jQuery Plugin Authoring Tutorial. Whether this was the correct way to do it or not, I don't know.
var methods = {
init: function(options) {
var $this = $(this), data = {};
/* Set a local copy of the options */
data.options = $.extend({}, defaults, options);
/* Create the content area */
data.$content = createContentArea(this);
/* Create the title bar */
data.$title = createTitleBar(this, data.options.header, data.options.title);
/* Show/Hide the content based on the default state passed in */
if(data.options.defaultState == contentVisible) {
data.$content.show();
data.state = contentVisible;
}
else {
data.$content.hide();
data.state = contentNotVisible;
}
/* Add the title click event */
data.$title.click(function() {
methods.toggle.call($(this).parent());
});
/* Add the public methods */
data.methods = {
toggle: methods.toggle,
expand: methods.expand,
collapse: methods.collapse
};
return data;
},
toggle: function() {
var $this = $(this), data = $this.data('plugin_' + pluginName);
if(data.state == contentVisible) {
methods.collapse.call(this);
}
else if(data.state == contentNotVisible) {
methods.expand.call(this);
}
},
expand: function() {
var $this = $(this), data = $this.data('plugin_' + pluginName);
data.$content.slideDown();
data.state = contentVisible;
$this.data('plugin_' + pluginName, data);
},
collapse: function() {
var $this = $(this), data = $this.data('plugin_' + pluginName);
data.$content.slideUp();
data.state = contentNotVisible;
$this.data('plugin_' + pluginName, data);
}
};
I am going to attempt develop a jQuery plugin and just wanted to get expert opinion on whether this is a good way to develop jQuery plugins.
I've done a lot of searching and have found many ways on doing jQuery plugins. I am surprised that these isn't a standard approach as most plugins seem to all be used in the same way.
I tried to follow a similar approach to the jQueryUI plugins whereby methods are called on elements by invoking $('selector').plugin('method1');
Any comments/critisms on my solution would be useful.
(function(plugin, $, undefined) {
var instances = [];
var defaultOptions = {
exampleOpt1: 1,
exampleOpt2: 2
};
var pluginClass = function($element,options) {
this.options = options;
}
pluginClass.prototype.method1 = function() {
console.log(this.options.exampleOpt1);
}
pluginClass.prototype.method2 = function(param2) {
console.log('Hello there '+param2);
}
$.fn.plugin = function() {
if ((arguments.length==0) || $.isPlainObject(arguments[0])) {
var opts = $.extend({}, defaultOptions, arguments[0]||{});
this.each(function(index, Element){
if (typeof $(Element).data('instanceIndex') == 'undefined') {
instances.push(new pluginClass($(Element).data('instanceIndex',instances.length),opts));
} else {
$.error('Attempting to initialise the element again.')
}
});
} else {
if (typeof pluginClass.prototype[arguments[0]] == 'undefined') {
$.error('Method '+arguments[0]+'() not defined.');
} else {
var iArguments = arguments; //arguments disappears in each() callback
this.each(function(index,Element){
if (typeof $(Element).data('instanceIndex') != 'undefined') {
instances[$(Element).data('instanceIndex')][iArguments[0]].apply(instances[$(Element).data('instanceIndex')],Array.prototype.slice.call(iArguments,1));
} else {
$.error('Cannot call method as element has not been initialised yet.');
}
});
}
}
return this;
}
}(window.plugin = window.plugin || {}, jQuery ));