Is this how you define a function in jQuery? - javascript

Is this how you define a function in jQuery?
$(document).ready( function () {
var MyBlah = function($blah) { alert($blah); };
});
Now to call the function I do:
MyBlah('hello');

First of all, your code works and that's a valid way of creating a function in JavaScript (jQuery aside), but because you are declaring a function inside another function (an anonymous one in this case) "MyBlah" will not be accessible from the global scope.
Here's an example:
$(document).ready( function () {
var MyBlah = function($blah) { alert($blah); };
MyBlah("Hello this works") // Inside the anonymous function we are cool.
});
MyBlah("Oops") //This throws a JavaScript error (MyBlah is not a function)
This is (sometimes) a desirable behavior since we do not pollute the global namespace, so if your function does not need to be called from other part of your code, this is the way to go.
Declaring it outside the anonymous function places it in the global namespace, and it's accessible from everywhere.
Lastly, the $ at the beginning of the variable name is not needed, and sometimes used as a jQuery convention when the variable is an instance of the jQuery object itself (not necessarily in this case).
Maybe what you need is creating a jQuery plugin, this is very very easy and useful as well since it will allow you to do something like this:
$('div#message').myBlah("hello")
See also: http://www.re-cycledair.com/creating-jquery-plugins

No, you can just write the function as:
$(document).ready(function() {
MyBlah("hello");
});
function MyBlah(blah) {
alert(blah);
}
This calls the function MyBlah on content ready.

No.
You define the functions exactly the same way you would in regular javascript.
//document ready
$(function(){
myBlah();
})
var myBlah = function(blah){
alert(blah);
}
Also: There is no need for the $

You can extend jQuery prototype and use your function as a jQuery method.
(function($)
{
$.fn.MyBlah = function(blah)
{
$(this).addClass(blah);
console.log('blah class added');
};
})(jQuery);
jQuery(document).ready(function($)
{
$('#blahElementId').MyBlah('newClass');
});
More info on extending jQuery prototype here: http://api.jquery.com/jquery.fn.extend/

jQuery.fn.extend({
zigzag: function () {
var text = $(this).text();
var zigzagText = '';
var toggle = true; //lower/uppper toggle
$.each(text, function(i, nome) {
zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
toggle = (toggle) ? false : true;
});
return zigzagText;
}
});

The following example show you how to define a function in jQuery. You will see a button “Click here”, when you click on it, we call our function “myFunction()”.
$(document).ready(function(){
$.myFunction = function(){
alert('You have successfully defined the function!');
}
$(".btn").click(function(){
$.myFunction();
});
});
You can see an example here: How to define a function in jQuery?

That is how you define an anonymous function that gets called when the document is ready.

Related

Using onclick() inside another function

function layoutMod() {
standardId = document.getElementById("standard");
fancyId = document.getElementById("fancy");
standardId.onclick = function() {
standard();
};
fancyId.onclick = function() {
fancy();
};
};
How can I use the onclick events defined above in a function??? Is it a good practice to load the function at page load?? I need to define in a function the onclick event beacuse I don't want to use global variables.
What you've written should work. However, you should note that by not using the var keyword, you're still creating global variables inside of your function. I would suggest...
function onloadHandler() {
document.getElementById("standard").onclick = function() {
// Do something
};
document.getElementById("fancy").onclick = function() {
// Do something else
};
};
It can get messing when you nest functions inside of each other. In this case, I would suggest removing the outer function so that your code looks like this:
document.getElementById("standard").onclick = function() {
standard();
};
document.getElementById("fancy").onclick = function() {
fancy();
};
The code does not need to be in a function, it will automatically be run on page load. Since you don't want global variables, just don't use variables at all.

Making Functions Public from Inside jQuery Function

I have a block of JavaScript/jQuery that works fine.
<script type="text/javascript">
$(function () {
function doSomething() {
// Do something amazing here!
}
// Many various jQuery handlers and support functions
});
</script>
But now I'd like my doSomething() function to be callable from another block of script on the same page.
I understand I can do that by moving doSomething() outside of the jQuery function ($(function () {})). But then doSomething() wouldn't be able to call the helper functions inside of the jQuery function.
I could move the other functions outside of the jQuery function, but some of them are handlers that need to be initialized, and they share they same helper functions.
Is there a way to keep all my functions inside my jQuery function, but just make one of them visible outside of it?
And any suggestions on where I could go to read up on this?
JavaScript has functional scope. So, the reason you can't call your function if it is nested within
$(function () { ... });
is because it is only accessible within that function's scope.
You can easily move that function definition:
function doSomething() { ... }
outside of the $(function(){...}) function and still have access to variables within the $(function(){...}) function's scope by passing the variables as parameters to the function and then having it return any modifications:
$(function () {
var blah = 'blah';
var result;
result = doSomething(blah);
// Many various jQuery handlers and support functions
});
function doSomething(blah) {
// Do something amazing here!
return newBlah;
}
// Now you can call your doSomething function in the global scope too
var example = "test";
var result = doSomething(example);
Well, in fact you should move your logic from this wrapper.
It's intended for initialization of logic that should run after DOM is ready. You shouldn't make any functions here.
Consider following pattern for your code:
(function($) {
// Your logic here
// You could safely export your functions to
// global scope from here, if you really need
var app;
app = {
forms: doSomething
};
function doSomething() {
// Do something amazing here!
}
window.app = app;
$(function() {/* start interact with DOM */});
}(jQuery));
You can do it extending jQuery:
$.extend({
foo: new function () {
var _self = this;
_self.doSomething = function () {
};
_self.initialize = function () {
$('#button-x').click(function(){
_self.doSomething(); //use the function inside
});
};
});
$(function () {
$.foo.initialize();
$.foo.doSomething(); //use the function outside
});

javascript from onclick into a function

I have the javascript code for a link click:
document.getElementById('giddy').onclick = function {
alert(this.href);
};
and I want to separate the function part of it...I have
document.getElementById('giddy').onclick = poro(this);
function poro(yyyy) {
alert(yyyy.href);
};
But it is not working (says undefined in the alert)...what am I doing wrong?
You don't need to pass this as a parameter. this will be the context for the function when it is called. You should just have:
document.getElementById('giddy').onclick = poro;
function poro() {
alert(this.href);
};
Get rid of (this) and use this in the function instead of yyyy.
document.getElementById('giddy').onclick = poro;
function poro() {
alert(this.href);
};
You're immediately calling the poro function.
Essentially, you're telling Javascript that the element's onclick value will equal the result of calling the poro(this [window] ) function.
To get around this, you can wrap the poro(this) function inside an empty function, like so:
document.getElementById('giddy').onclick = function(){poro(this)} function poro(yyyy) { alert(yyyy.href); };
You may also want to consider using an eventListener, as it allows room for expansion.
Almost there! You should do:
document.getElementById('giddy').onclick = function(){ poro(this); }
function poro(yyyy) {
alert(yyyy.href);
};
Note poro(this); wrapped in an anonymous function.
I'd recommend using addEventListener instead of the onclick method.
Try this:
var giddy = document.getElementById('giddy');
giddy.addEventListener('click', function(e) { poro(this); }, false);
function poro(yyyy) {
alert(yyyy.href);
}
since you are using jquery use :
$('#giddy').click(function(){ poro($(this));});
or you can use the bind() function
$("#giddy").bind("click", $(this), poro);

Passing Parameters into a Callback Function

I have a function that listens for a click on the screen and fires a callback. It is part of a Helper object (which is why is preceded by the term Helper in my sample code. That is irrelevant however.
var Helper = {
bodyClickListener: function(fn) {
var window = document.getElementsByTagName('body')[0];
window.click();
CORE.dom.on(window, 'click', function(event) {
CORE.dom.off(window, 'click');
fn(event);
});
}
}
I need to be able to pass a function into this function with a parameter that has been previously set.
function someFunction() {
var popup = document.getElementById('tagResultsPopup');
Helper.bodyClickListener(function(popup) {
return function(event) {
event.stopPropagation();
removePopup(popup);
};
}(document.getElementById('tagResultsPopup')));
function removePopup(element) {
if(element) {
element.parentNode.removeChild(element);
}
};
}
The code above works, but you'll notice that I have to set the popup variable inside of the callback function. It has already been set above. How do I pass a reference to the earlier variable into the callback function.
If I understand your question correctly, you don't need to do much. You can just use the popup variable defined outside.
var popup = document.getElementById('tagResultsPopup');
Helper.bodyClickListener(function(event) {
event.stopPropagation();
//Don't set it
//var popup = document.getElementById('tagResultsPopup');
removePopup(popup);//popup will refer to the correct variable
});
The function that you are passing to bodyClickListener is a closure. You can simply reference 'popup' inside that function without any problem. You don't have to create a new variable.
The answer was to use closure in this way:
Helper.bodyClickListener(function(popup) {
return function(event) {
event.stopPropagation();
removePopup(popup);
};
}(document.getElementById('tagResultsPopup')));
That way the callback function has access to the variable I pass into the parameter function. So here, the return is actually the function I am passing as the callback.

Best practices for declaring functions inside jquery ready function

I haven't found a good reference for declaring my own functions inside the
jquery.ready(function(){});
I want to declare them so they are inside the same scope of the ready closure. I don't want to clutter the global js namespace so I don't want them declared outside of the ready closure because they will be specific to just the code inside.
So how does one declare such a function...and I'm not referring to a custom jquery extension method/function...just a regular 'ol function that does something trivial say like:
function multiple( a, b ){
return a * b;
}
I want to follow the jquery recommendation and function declaration syntax. I can get it to work by just declaring a function like the multiply one above...but it doesn't look correct to me for some reason so I guess I just need some guidance.
I believe that you would be okay just declaring the function inside the ready() closure, but here you can be a bit more explicit about the local scoping:
jQuery.ready(function() {
var myFunc = function() {
// do some stuff here
};
myFunc();
});
It might sound simple but you just ... declare the function. Javascript allows functions to have inner functions.
$(document).ready( function() {
alert("hello! document is ready!");
function multiply(a, b) {
return a * b;
}
alert("3 times 5 is " + multiply(3, 5));
});
I have a StartUp function, and I use it as printed bellow:
function StartUp(runnable)
{
$(document).ready(runnable.run);
}
var ExternalLinks =
{
run: function()
{
$('a[rel="external"]').bind('click', ExternalLinks.click);
},
click: function(event)
{
open(this.href);
return false;
}
}
StartUp(ExternalLinks);
var ConfirmLinks =
{
run: function()
{
$('a.confirm').bind('click', ConfirmLinks.click);
},
click: function(event)
{
if (!confirm(this.title)) {
return false;
}
}
}
StartUp(ConfirmLinks);
My web sites are modular, so every module has N actions and every action can have a .js file, so I just write function and call it with StartUp(...functionName...)

Categories