Passing Parameters into a Callback Function - javascript

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.

Related

How do I pass a parameter to this Google ReCaptcha function?

I am having an issue getting the count parameter to pass into the verifyCallback in the following piece of code:
var CaptchaCallback = function () {
console.log('CaptchaCallback run');
var count = 0;
$('.g-recaptcha').each(function (index, el) {
grecaptcha.render(el, {
'sitekey': 'xxx',
'callback': verifyCallback(count)
});
count++;
});
};
If I remove the parameter everything works as it should, only the parameter can't be passed for an essential part of the function.
If I add the parameter the function runs straight away without waiting for the ReCaptcha to be verified.
I want to be able to pass the parameter and then have the function run when the ReCaptcha is verified.
Here is the function that the parameter is passed to if it helps:
function verifyCallback(formNumber) {
//var formNumber = 1;
console.log('verifyCallback');
$('#submitBtn_' + formNumber).prop('disabled', false);
console.log('#submitBtn_' + formNumber);
}
Edit: When I use the parameter it doesn't bring the count through, it brings back the response from Google...
Thank-you
The issue is because you're calling the verifyCallback function immediately and assigning the returned value of that function to the callback property.
To fix this, wrap the function call in an anonymous function which is then provided as a reference to the callback. Also note that you can use the index value from the each() handler instead of manually maintaining the count variable. Using this method will also mean that you don't need to use a closure to keep the count value in scope of the current iteration. Try this:
var CaptchaCallback = function () {
console.log('CaptchaCallback run');
$('.g-recaptcha').each(function (index, el) {
grecaptcha.render(el, {
sitekey: 'xxx',
callback: function() {
verifyCallback(index)
});
});
count++;
});
};

Acces member variables in nested functions

I have a class which uses jQuery functions inside it's internal function.
How can I refer to the member variable inside the jQuery callback function?
See the code below:
var UriParser = function(uri) {
this._uri = uri; // let's say its http://example.com
};
UriParser.prototype.testAction = function() {
$('a').on('click', function(event) {
// I need the above this._uri here,
// i.e. http://example.com
}
}
The problem is this inside the event handler does not refer the UriParser object, it is referring the dom element which was clicked.
One solution is to use a closure variable
UriParser.prototype.testAction = function () {
var self = this;
$('a').on('click', function (event) {
//use self._uri
})
}
another is to use $.proxy() to pass a custom execution context
UriParser.prototype.testAction = function () {
$('a').on('click', $.proxy(function (event) {
//use this._uri
}, this))
}

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);

How to access attribute in jQuery callback func?

var some_name =
{
moving:false,
show : function ()
{
this.moving = true;
$('element').slideDown(5000, function ()
{
this.moving = false; //How to access to attribute "moving" of class some_name?
});
},
}
Question in code.
You can bind the callback function to the current context:
$('element').slideDown(5000, $.proxy(function() {
this.moving = false;
}), this); // "this" inside of the function will be this "this"
See jQuery.proxy
Alternatively you could do this:
this is the current context, it's value depends on how the function is called. You can assign this to a variable outside of the function, and use this variable instead:
var that = this;
$('element').slideDown(5000, function() {
that.moving = false; //use that instead of this here
});
Use moving instead of this.moving (in both occurences)
Variables are bound to the context when they are used, so even inside your event callback you can access the variables above.
In the event callbacks, this refers to event.target, or the element that captured the event.
You can take the advantage of closures in javascript and access the moving attribute like this:
show : function ()
{
var moving = true;
$('element').slideDown(5000, function ()
{
moving = false;
});
},
Note, though, that this moving will be different of the first moving that lives in some_name

Is this how you define a function in jQuery?

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.

Categories