Convert Javascript function to jQuery plugin - javascript

I have already a short-hand function like so:
function myObj() {};
myObj.prototype.read = function (name) {alert(name);};
...(more functions)
Now I would like to "convert" this to a jQuery plugin.
What is the best way to do so? (My function doesn't need a selector before it).
I thought about doing it like this:
$.myObj.methodHere();
Thanks in advance.

Just add your method to the jQuery object.
$.myObj = myObj;
Then you can call it like:
$.myObj.methodHere();
EDIT: Why do you want to do this? jQuery plugins are supposed to act upon jQuery objects. Your function "doesn't need a selector before it", therefore it's not really a "plugin".

Related

jQuery plugin: I would like to be able to access the selector from the method called.

This is a simple example. Here is the call to the method.
$('.className').somePlugin.someMethod(1);
My question is: How do I access $('.className') within the below method?
$.fn.somePlugin.someMethod = function(someNode) {
enter code here
}
I would like to dynamically get the $('.className') object from within the method as illustrated above. Any idea if this is possible without having to do something like this:
$.somePlugin.someMethod('.className', 1);
Thnaks in advance.
I've seen some mumblings about there being a selector attribute on the jQuery object. I've never tried it though. It goes like this...
$(this).selector
Take a look at jQuery end(). It may be of some use to you here.
http://api.jquery.com/end/

Jquery call function dynamically

I have a following scenario that I have to call a function on a jquery object dynamically. The code looks like this :
$('div[class]').each(function(){
var class=$(this).attr('class');
// I want to now check if that function with the name of class exists for jquery
// object. I need help here.
// if that function exists, i need to apply that function to the enumerated object.
});
I want to now check if that function with the name of class exists for jQuery object. I need help here. If that function exists, I need to apply that function to the enumerated object.
I'm writing this of the top of my head so it might not work, but try:
if(jQuery.isFunction(jQuery[class]))
jQuery[class](this);
Edit: if the function is a jquery method then try with:
if(jQuery.isFunction(jQuery.fn[class])) {
jQuery.fn[class](this);
jQuery(this)[class](); // alternative call syntax
}

How to translate such a function to jQuery?

So in my code I used
function $(id) {
return document.getElementById(id);
}
I want to move to jQuery. How to translate such thing to it?
Don't use this function, function $(id). Use the jQuery function $('#id'). This function will return an object with bunch of jQuery methods.
Methods include remove(), hide(), toggle(), etc., and the implementation is like $('#id').hide(), $('#id').show(), etc.
There are so many, many jQuery methods, that simplifies it in so many ways.
If I got your question right, you will need to include jQuery inside your page, and replace the following line:
return document.getElementById(id);
with this one:
return $("#"+id);
Using Jquery selectors you can do the same thing very easily.
$("#" + id)
For more details:
http://api.jquery.com/id-selector/
Just use
$("#"+id)
That will return the element with the right ID.

Using jQuery in a JavaScript function

function divlightbox(val)
{
if(val)
{
val=val.replace( /^\s+/g, "" );
var count_js=0;
var big_string='';
document.getElementById("video_lightbox").innerHTML="";
document.getElementById("divlightbox").style.display = "block";
$("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});
I found out that the error is in the above. My question is can't I use jQuery and traditional JavaScript at same time? I have done coding like this numerous times and never ran into a problem like this. I used to use jQuery methods like .hide() and .css() inside JavaScript functions but this time it doesn't work.
Thanks in advance.
While the other answers fix the specific problems, I don't think the OP's question (in bold) is really answered here, as depending on the specific context, $ may possibly not be defined as a jQuery object yet (having had this problem myself a few times now.)
In which case you would need to do something like:
function divlightbox(val) {
// ...
// just use jQuery instead of $ one time
jQuery("#video_lightbox").css({"height":"430px","top":"10%","width":"480px"});
}
OR
function divlightbox(val) {
// define the $ as jQuery for multiple uses
jQuery(function($) {
// ...
$("#video_lightbox").css("height":"430px");
$("#video_lightbox").css("top":"10%");
$("#video_lightbox").css("width":"480px");
});
}
jQuery is JavaScript so YES. Instead .innerHTML="" just use .empty(). Instead .getElementById() use $('#..') and so on.
to do things like hide(); and css() you need jquery objects. you can't do them to dom elements.
so you could do $('#video_lightbox').html("");
or
$('#video_lightbox').empty();
You must provide error in javascript console.
1) Do you pass a val argument to divlightbox function()? When do you call it?
2) why do you use the same identifier divlightbox both for a function and for a div id? Change name to the function please, maybe the problem could be here.
3) Always check if video_lightbox and divlightbox exist before accessing them.

passing javascript object to function in a jquery way?

Yeah so I've been messing around with javascript a while but only recently got into stuff like object orientation, prototyping and using objects for all functions and vars.
But, many frameworks like jQuery or extJS have something I have yet to grasp, you can define an object by using a built in function for searching the dom, example:
var a = $('#mydiv');
and then you can do a.click(function);
So my question is, how can I create a "framework" of sorts where I can write code in that style, like example:
var mydiv = document.querySelector('mydiv');
mydiv.neph(args,args);
So I have my object defined, in this case it's a dom element or whatever, now I pass it to my function "neph" with arguments, I want to create code that allows me to do this. But since mydiv does not have any function, it only has in this case the dom element right so mydiv.neph does not exist, but in jquery you can define whatever var and .click or .mouseover or whatever does exists within the object as functions? Confusion ensues! :D
Ok sorry if this is a retarded question btw =P
jQuery and other libraries define a function called $ that takes several optional parameters. The object returned by calling $ is not a DOM element, but a jQuery object wrapping a DOM element up with a set of convenient functions.
You can do something similar yourself:
<html>
<body>
<input id="derp" type="text"/>
<script type="text/javascript">
function $(id)
{
return new myLibrary(id);
};
function myLibrary(id)
{
this.el = document.getElementById(id);
};
myLibrary.prototype.help = function()
{
alert(this.el.id);
return this;
};
// Woah! My own fake jquery!
$("derp").help();
</script>
</body>
</html>
jQuery is far more sophisticated, of course. For example, it will use apply and call to set this correctly in calls like jQuery.each.
You need to create a Prototype in javascript. This is what allows you to add a function to an object that's already defined (i.e. the .click() function that you gave as an example).
You can have a look at the jQuery code, it's open source. It's not the simplest code, but you can still see how it works and how they do it.
Mike's comment is a good answer: Look at jquery or Ext-Core's sources.
Maybe what you're missing is that, in jquery, for instance $() returns a jquery object, which wraps the plain vanilla DOM node, providing extended functionality.
In jQuery, $ is just an alias to the jQuery object. So when you call $('#mydiv'); you're really calling a function like jQuery('#mydiv'); So part of what makes jQuery so cool is that every the $() function returns this, which means when you call the $() you're getting a handle to the jQuery object and all of the methods it has on it. That is what allows you to do something like this:
var a = $('#mydiv');
a.click(function() { // etc etc etc });
So to pull off your example:
var mydiv = document.querySelector('mydiv');
mydiv.neph(args,args);
You'd have to create an object that has a function called neph on it and return that object in the context of mydiv when you call querySelector.
var myFramework = function() {
this.context = undefined;
this.neph = function(arg, args) {
console.log(arg, args);
}
};
var myCuteFunction = function(element) {
var f = new myFramework();
f.context = element;
return f;
}
// ...
var x = myCuteFunction('#mydiv');
x.neph(arg, args);
Since nobody has really answered about Ext, you can easily extend the element wrapper prototype:
Ext.override(Ext.Element, {
myMethod: function(a, b){
console.log(a, b, this);
}
});
"this" will refer to the Ext.Element object.

Categories