jQuery - Plugins and namespace issues with method chaining - javascript

I'm trying to create a simple plugin that I can call by both: $.myPlugin() and $('something').myPlugin()
Heres the code:
(function($) {
$.fn.myPlugin = function(item) {
return this;
};
$.myPlugin = function(item) {
return $.fn.myPlugin(item);
};
}(jQuery));
This works when called either way mentioned above.
However, calling $.myPlugin().hide() does not work. Any chained methods are failing.
Heres a simple JSBin I made showing the issue
Why?

You should return $(this), not jquery this:
(function($) {
$.fn.myMethod = function() {
this.append('<p>MY METHOD</p>');
return $(this);
};
$.myMethod = function() {
return $.fn.myMethod();
};
}(jQuery));
$(function () {
// Moment of truth
$('.output').myMethod().hide('slow');
$('h1').click(function(){
$('.output').myMethod().hide();
});
});

Related

Call function from outside jquery plugin - slimscroll.js

The code for the plugin is as follows,
(function($) {
jQuery.fn.extend({
slimScroll: function(options) {
var defaults = {
....
};
this.each(function() {
function scrollContent(y, isWheel, isJump) {
....
}
}
return this;
}
}); jQuery.fn.extend({
slimscroll: jQuery.fn.slimScroll
});
How do i call the function scrollContent() from outside the plugin?
i have tried
$("#myId").Slimscroll().ScrollContent();
$("#myId").data("SlimScroll").ScrollContent();
And many other ways but dosent seem to get it working.
As the code shows scrollContent is a private method and is not supposed to be accessed from outside the plugin. Instead you could re-render the scrollbar by simply calling $("#myId").slimScroll() as shown in this example.

Javascript Module with JQuery

I have a question about javascript module pattern with JQuery.
Im a little confused about how i should use jquery. I have all my javascript modules in seperate files.
Lets say I have a small module
var jqueryTest = (function () {
function privateMethod() {
$("input[type=submit], a, button")
.button()
.click(function () {
alert("ALARM");
});
}
return {
test: function () {
privateMethod();
}
};
})();
I then call the module from my index and it works.
I then tried to pass JQuery as a parameter like this
var jqueryTest = (function (jq) {
function privateMethod() {
jq("input[type=submit], a, button")
.button()
.click(function () {
alert("ALARM");
});
}
return {
test: function () {
privateMethod();
}
};
})(JQuery);
But then it stops working?
The word "JQuery" thats passed as a parameter, what does this refer to?
And how should I use JQuery when having the javascript in different files?
Hope someone can help
you have a typo. its jQuery. not JQuery
Try using jQuery instead of JQuery:
Example:
html:
<div id="myDiv"></div>
javascript:
var jqueryTest = (function (jq) {
jq("#myDiv").html('<label>Hi there!</label>');
return "hi " + jq("#myDiv").text();
})(jQuery);
alert(jqueryTest);

Getting value from this JQuery plugin

I've been experimenting with writing JQuery plugins lately, and I'm sure this is a very simple question. But, I seem to not be able to get a value inside of my plugin.
For example, I have the following code:
plugin.js
$(function($) {
$.fn.myPlugin = function() {
// alert the id from main.js
}
});
main.js
$(document).ready(function() {
$('#someDIV').attr('id').myPlugin();
});
You cannot define plugin on string. Use selector to call the plugin.
Have a look at this.
Use it like this:
(function ($) {
$.fn.myPlugin = function () {
this.each(function () {
// Allow multiple element selectors
alert(this.attr('id'));
});
return this; // Allow Chaining
}
} (jQuery));
$('.myClass').myPlugin();
DEMO
Tutorial
Try this:
(function($) {
$.fn.myPlugin = function() {
alert($(this).attr('id'));
}
}(jQuery));
See here: http://jsfiddle.net/1cgub37y/1/
You should pass only the object into your jQuery-extension function (not the object's ID), as below or in this fiddle (will alert "someDIV" onload):
// jQuery extension
// The object passed into jQuery extension will occupy keyword "this"
$(function($) {
$.fn.myPlugin = function() {
// Get the ID (or some other attr) of the object.
var id = $(this).attr("id");
// Now do something with it :)
alert(id);
}
});
$(document).ready(function() {
$('#someDIV').myPlugin();
});

Create Jquery Plugin

I creating jquery Plugin with simple alert option. I did this way see below is my code.But it doesn't work.
Below code is the seperate js file.
(function($) {
$.fn.gettingmessage = function() {
var element = this;
$(element).load(function() {
alertingcontent();
function preventnextpage() {
return false;
}
function alertingcontent() {
alert("nicely done");
});
};
})(jQuery);
I called this function as
this way
$(function(){
$("body").gettingmessage();
});
I am not sure how can i fix this any suggestion would be great.
JSFIDDLE
Thanks
First, you're missing a closing bracket.
Second, the load() function doesn't do what you're searching for, use ready() instead of.
Updated code :
(function($) {
$.fn.gettingmessage = function() {
var element = this;
$(element).ready(function() {
alertingcontent();
function preventnextpage() {
return false;
}
function alertingcontent() {
alert("nicely done");
}
});
};
})(jQuery);
$(function(){
$("body").gettingmessage();
});
Updated jsFiddle

Calling jQuery plugin public function within plugin

I know, there are quite a few examples on the Web, but finding real one out of them all is tough for beginner. So I want to create jQuery plugin with public methods. Example code:
(function($) {
$.fn.peel = function(options) {
var defaults = {
};
var settings = $.extend({},defaults, options);
this.public = function() {
alert("public");
};
var private = function() {
alert("private");
}
return this.each(function() {
//this.public();
private();
});
};
})(jQuery);
As I found, this is the way to make public function, which could be called like this :
var peel = $('img').peel();
peel.public();
So far it works as expected - public() can be called. But what if i want to call that function within my plugin? I commented out in this.each() because it does not work. How can i achieve that?
One way to create publicly accessible methods within your plugins is to use the jQuery UI widget factory. This is the framework that jQuery UI uses for all of it's supported UI widgets. A quick example would look like this:
(function( $ ) {
$.widget( "something.mywidget", {
// Set up the widget
_create: function() {
},
publicFunction: function(){
//...
}
});
}( jQuery ) );
var $w = $('#someelement').mywidget();
$w.mywidget('publicFunction');

Categories

Resources