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

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

Related

JS - Calling function from function not working

I have a function that gets called, and in it, I call another function called:
updatePerson(name)
For some reason it never activates when the function below is called. Everything else in the function works.
function updateName(name) {
$.get('XXX',function (data) {
var results = $.parseJSON(data);
var matchName = String(results.data[0].first_name);
updatePerson(matchName);}
);
};
Has anyone got an idea what I am doing wrong?
If I run alert(matchName) I get Nick as a response.
If I run console.log(updateMap(matchAddress)) I get undefined
It could do with the fact that you're passing a parameter from a callback function. In Javascript, variables inside a Callback are not available outside the callback.
Try setting the value of String(results.data[0].first_name) to a variable declared outside of the updateName function (i.e a global variable) and then call the updatePerson function outside of update name, with the globally declared variable as a parameter. Like so
var globalMatchName = '';
function updateName(name) {
$.get('XXX',function (data) {
var results = $.parseJSON(data);
globalMatchName =String(results.data[0].first_name);
}
);
updatePerson(globalMatchName)
}

Call back when using pre-defined function

I've declared a new function. Then I'm calling that function later. How do I run code only if the function I'm calling has completed.
this is my code
var callLogin = function() {
$(document).ready(function() {
if(document.getElementById("userLoggedIn") === null) {
$(".cover").fadeIn(200);
$(".sixPinInputContainer").fadeIn(200);
$("#pageBody").css("overflow", "hidden");
$('.sixPinInput').first().focus();
};
})
};
Then This is where I call It. The problem is that it's running the .load before it calls my pin container so even if pin is incorrect it runs code.
if (startBtn) {
callLogin()
$("#" + rowID).load("eventHandlersPHP/updateStart.php", {
roomID: id }, function(data, status) {
$("#notStartedCount").load("eventHandlersPHP/jobsNotStartedCount.php");
})
};
This is documented pretty well here. You could create some sort of action that'll trigger the one function, then it can call the other. Also, this will probably be a more helpful place for what it is you're trying to do.
-Gonzo

Returning values in Javascript to C# HTML file

Here is my issue, I have a javascript function in a .js file that performs some actions, gathers information, and uses a callback. The callback function is also a javascript function but resides in a .cshtml file. I am have difficulties returning a value from my .js javascript function to my .cshml javascript callback function.
Here is a little sample code...
my .js function which I would like to return a value from:
function returnVal(itemID, onCompleteCallback) {
//get vals from DB
onCompleteCallback();
}
my .cshtml script that calls the previous function and I need to get the returned value is a button click even:
updateBtn.onclick = function(e) {
if(action==1) {
returnVal(itemID, OnCompleted);
}
I have tried 2 methods, neither has worked. I have tried returning a value within the "returnVal" function which doesn't seem to results in anything being returned. I have also tried passing a variable as type var and setting it within the returnVal function, it was my understanding that primitives are passed by value (and thus this wouldn't work) but objects are passed by reference and so I thought this would work. At any rate, neither was successful. Bellow are examples of how I have tried the aforementioned 2 methods:
Method 1:
function returnVal(itemID, onCompleteCallback) {
//get vals from DB
onCompleteCallback();
return x;
}
updateBtn.onclick = function(e) {
if(action==1) {
x = returnVal(itemID, OnCompleted);
}
}
Method 2:
function returnVal(x, itemID, onCompleteCallback) {
//get vals from DB
onCompleteCallback();
}
updateBtn.onclick = function(e) {
if(action==1) {
var x;
returnVal(x, itemID, OnCompleted);
}
}
In both cases 'x' is not set. I hope I have provided enough details, any help would be greatly appreciated.
I think you want something like
function returnVal(itemId, onComplete){
var data = getValueFromDatabase();
onComplete(data);
}
updateBtn.onclick = function(e) {
if(action==1) {
returnVal(itemID, function(data){
// Do something with returned value i.e. 'data'
});
}
}

js execute function after object is defined

I need for a function to be executable only after an object is defined, I'm currently working in a fascade pattern and one method is dependent on another method. in this case 'addNewLayer' fails because 'setFullMap' hasn't finished executing. is there a solution? I'm using jquery and vanilla js so most any solution would be helpful at this point:
var jen = (function(){
function setFullMap(mapID){
jen.map = new Map(mapID);
}
function setLayer(opt){
//execute code here after jen.map is defined
}
return{
samp: function(id, opt){
setFullMap(id);
addNewLayer(opt);
}
};
})();
Thanks
solution:
var jen = (function(){
function setFullMap(mapID, callback) {
jen.map = new Map(mapID);
if(jen.map){
callback();
}
}
return {
samp: function(id, opt){
setFullMap(id, function(){
addNewLayer(opt);
}.bind(this));
}
};
})();
You will have to pass a callback function to setFullMap, and execute it once the function has completed (at the very end, before the closing }).
var jen = (function(){
function setFullMap(mapID, callback){
jen.map = new Map(mapID);
callback();
}
function setLayer(opt){
//execute code here after jen.map is defined
}
return{
samp: function(id, opt){
setFullMap(id, function() {
addNewLayer(opt);
}.bind(this));
}
};
})();
Do not forget using .bind(this) - it is very important in order to keep the original this in your callback function.
Edit:
Actually that would not work work if the Map constructor is a-synchronous. If you do not have access to the constructor and/or you cannot pass it a callback, then presumably the only (and sad) option would be to use a setTimeout or (easier) setInterval, continuously checking at defined intervals if the operation has been completed, and then fire the callback.
You could use a callback parameter:
function setFullmap(mapId,callback) {
jen.map = new Map(mapId);
callback();
}
....
samp: function(id, opt){
setFullMap(id,function() {
addNewLayer(opt);
});
}
When u dont have a way to manipulate the Map Object then u need to use a loop:
var loop=self.setInterval(function(){
if(jen.map) {
//execute code here after jen.map is defined
console.log(typeof jen.map);
window.clearInterval(loop);
}
},50);
Check jsfiddle:
http://jsfiddle.net/9yv5t/1/
I have checked the docs and it seems that there are various events you could listen to.
For example:
var m = new Map(...);
m.on('load', function () {
//execute code when the first layer is ready
});
var l = new Layer(...);
l.on('load', function () {
//execute code when the layer has been initialized
});
It's also carefully stated for the Layer.load event:
fires after layer properties for the layer are successfully populated.
This event must be successful before the layer can be added to the
map.

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.

Categories