Captcha/JQuery - Click simulation only works once - javascript

Hello fellow stack overflowers. I'm using JQuery to simulate a click on an invisible button that's linked with reCaptcha. Multiple buttons need to be attached to reCaptcha and you can only have one reCaptcha in each page. So, I created a callback function that detects which button is pressed. Here is how I did that:
HTML:
<div class="invisible">
<button class="g-recaptcha"
data-sitekey="..."
data-callback="captcha_callback"
data-badge="inline"
data-type="image"
id="btn_captcha"></button>
</div>
Click event + click simulation:
$("#review_send").on("click", function() {
alert("HI");
$("#btn_captcha").data("button-pressed", "review");
$("#btn_captcha").click();
$("#btn_captcha").blur();
});
reCaptcha callback:
var captcha_callback = function(response) {
if($("#btn_captcha").data("button-pressed") === "mail") {
alert($("#btn_captcha").data("button-pressed"));
send_contact_mail(response);
} else if($("#btn_captcha").data("button-pressed") === "review") {
alert($("#btn_captcha").data("button-pressed"));
send_review(response);
}
};
What happens is; when I click #review_send for the first time everything works: It first alerts "HI" and then "review".. But when I press #review_send a second time I only get the alert with "HI".
I have discovered that the click works again after waiting a while.
Is this something JQuery/Javascript related, has it something to do with reCaptcha or does reCaptcha have a timeout?
Thanks in advance!

Soo, I made this workaround because I thought that you can't have multiple recaptcha on the same page. However, I figured out that there is a way to have multiple of them.
You can render reCaptcha's and reset them (both with javascript):
var widget1 = grecaptcha.render("divID", {
siteKey: "...",
type: 'image',
callback: function(response) {
send_review(response);
}
});
Reset:
grecaptcha.reset(widget1);
I only have to check which button I pressed to render in the correct div and/or reset the correct reCaptcha.

Related

Can't Focus on dojo Button OK

I'm trying to run a dojo (searchNotFound) if another dojo of searching (searchDlg) not finding result
So, the dojo (searchNotFound) is up , but not focusing on OK (cause I've an event onkeypress on this Button OK)
So, this is my code :
Function FindString() :
function findString(str) {
//Some Code
//if serach not founding , running dojo searchNotFound
if (!strFound) {
dojo.widget.byId("searchDlg").hide();
dojo.widget.byId("searchNotFound").show();
dojo.byId("searchnotfound_close").focus(); --> ****** not working ******
}
}
OnKeyPress event on OK Button (searchnotfound_close) of dojo (searchNotFound) :
--> Works Fine
<button class="btn dlg" id="searchnotfound_close" onkeypress="javascript:closeSearchNotFound(event)"><span key="ok">Ok</span></button>
Function closeSearchNotFound(event)
--> Works Fine
//#96985
function closeSearchNotFound(event) {
if(event.which == 13){
dojo.widget.byId('searchNotFound').hide();
dojo.widget.byId('searchDlg').show();
}
}
//
See This test video :
https://www.youtube.com/watch?v=cM4rCtP7REA&feature=youtu.be
I'm assuming 'searchNotFound' is a dijit/Dialog. show() is asynchronous because it shows the dialog with an animation. Because of that, show() returns a dojo/promise/Promise. Once the promise completes, the dialog is fully rendered and your subsequent search should work.
Use the promise and register your own callback:
registry.byId("searchNotFound").show().then(
function() {
dojo.byId("searchnotfound_close").focus();
});

Attach handle on every onhide method of bootstrap3-dialog

I'm using bootstrap3-dialog library from https://nakupanda.github.io/bootstrap3-dialog/
The problem is, everytime the dialog shows (alert, confirm or custom dialog), the body's scrollbar is gone and never come back when dialog closed. I could add this line on every dialog's onhide property, but that would be time consuming:
$('body').css('overflow','scroll')
Is there any other way to trigger that function every time the modal closes?
I was going through the code of bootstrap modal and they have this:
resetScrollbar: function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
}
},
Which is called on:
hideModal: function() {
this.$element.hide();
this.backdrop($.proxy(function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.removeClass('modal-open');
}
this.resetAdjustments();
this.resetScrollbar();
this.$element.trigger('hidden.bs.modal');
}, this));
}
I can't seem to figure out what would cause this code to not bring the scrollbar back. It seems to be working fine on their website.
If you are comfortable, I would suggest debugging the hideModal function of the api itself and figure out why it is not working and maybe put the above css snippet in there as a work around.
Or maybe post your code on plunkr, jsfiddle so we can look at what is going on.

Using Document Ready on Click Event

I am still new to javascript.
I have an application that has two buttons on the page. One is a cpu_vs_player button that displays one game and the other is a player_vs_player button that displays a different game. The problem is that all the code is located in one application.js file. There is no need to load the player_vs_player on $(document).ready(function(){}); if I were to play cpu_vs_player.
Any ideas on how I can get them to load only if I chose that game? (I am only using one route with all the information being hidden / shown based on the click).
The document.ready is nothing more than the moment after the page has rendered and the document needs to be populated with event listeners. Frankly there are multiple way of skinning this cat.
You can either do the jQuery way where you keep javascript and HTML divided:
<button id="button1">cpu_vs_player</button>
<button id="button2">player_vs_player</button>
And for JavaScript:
Assuming you have a function for each gameplay:
function cpu_vs_player() {
// start the game
}
function player_vs_player() {
// need another player
}
Add event listeners the jQuery way:
$(document).ready(function() {
$("#button1").click(function() {
cpu_vs_player();
});
$("#button1").click(function() {
player_vs_player();
});
});
OR you could use the method #Techstone shows you, though you could do it more direct. It all works though.
<button onclick="javascript:cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:player_vs_player();">player_vs_player</button>
Adding another option you can apply
In Javascript:
var Main = {
cpu_vs_player: function() {
alert("start cpu_vs_player");
},
player_vs_player: function() {
alert("start player_vs_player");
}
}
In your HTML:
<button onclick="javascript:Main.cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:Main.player_vs_player();">player_vs_player</button>
And yes, there is more ... ;-)
image that your two button and js definition like below
function LetsRock(Playmate) {
....
}
<input type='button' value='cpu_vs_player' id='cpu_vs_player' onclick='javascript:LetsRock(this.id);' />
<input type='button' value='player_vs_player' id='player_vs_player' onclick='javascript:LetsRock(this.id);' />
Try to use the function with parameters (i.e. 0 to cpu v/s player, 1 to player v/s player), and send from the menu page to the $(document).ready(function(){});

JQuery: div appears and disappears normally but second time clicked it does not work

I am pretty new to JQuery. I was looking for divs to hide and show in my homepage. This worked with following code pretty good:
jQuery(document).ready(function () {
jQuery(".tab-filteractivation2").hide(); //hide at the beginning
function hideDiv(e) {
e.preventDefault();
jQuery(this).text('open it') // text after first click
.click(showDiv)
.siblings(".tab-filteractivation2").hide(400);
}
function showDiv(e) {
e.preventDefault();
jQuery(this).text('close it') // text when it is open
.click(hideDiv)
.siblings(".tab-filteractivation2").show(400);
}
jQuery('.hover').click( showDiv );
This is my HTML-code:
<div class="filter">
<a class="hover" href="javascript:;">open</a>
<div class="tab-filteractivation2">test</div>
</div>
My DIV is called tab-filteractivation2 and it appears and disappears as I want. But only for the first click: As soon as I click more than one time the show button, it appears somehow exponential.
Here is a little step-by-step introduction:
1. I click on "open" and the tab appears with the delay (400) (with the text "test")
2. I click on "close it" and the tab disappears with the delay (400) (until here everything is fine)
3. I click again on "open it" and the tab appears BUT first it appears with the delay (400) and then immediately disappears with the delay (400) and then again appears with the delay (400).
4. I click on "close it" and the tap disappears with the delay (400) and it appears with the delay and it disappears with the delay and it appears with the delay and it disappears with the delay (400).
Therefore I wrote it is somehow exponential. It will be from click by click more and more actions until it is finished. But I would be happy only having this delay once and all the other steps not.
Can someone help me by this function and say how I could prevent it? That would be great!
Many thanks in advance. And I hope it was somehow clear for you guys.
Try:
jQuery(".tab-filteractivation2").hide(); //hide at the beginning
function showDiv(e) {
e.preventDefault();
if(jQuery(this).text() == 'close it'){
jQuery(this).text('open it').siblings(".tab-filteractivation2").hide(400);
}
else{
jQuery(this).text('close it').siblings(".tab-filteractivation2").show(400);
}
}
jQuery('.hover').click( showDiv );
DEMO here.
you could use toggle():
jQuery('.hover').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.siblings(".tab-filteractivation2").stop().toggle(400, function () {
$this.text($(this).is(':visible') ? 'close it' : 'open it');
});
});
You add an event listener every time you hide or show the tab. You need to initialize nodes' listeners separately.
$('.hover').on('click', function() {
if($('tab-filteractivation2').is(':visible')) {
$('.tab-filteractivation2').slideUp(400);
} else {
$('.tab-filteractivation2').slideDown(400);
}
});
The code above will do what you are trying to do in a much more simple manner. If you are struggling to understand how it works give me a shout :).

click a button from a java-script function

I am trying to get a java-script function to click a hidden button in order to execute some code. I wrote a short program to try and test this method.
Here I establish two buttons.
<div><button>test</button></div>
<div class="rowHidden"><button id="testHiddenButton">open the dialog</button></div>
Below is my java-script.
function clickTestButton() {
$("#testHiddenButton").trigger("click");
}
$("#test").click(function () {
clickTestButton();
});
$(#"testHiddenButton").click(function () {
alert("TESTTTTTTTTTTTTTTTTTTTT");
});
The idea is that when the first button is clicked, it triggers the next button to click. This does not work though. It seems like the page processes something but the alert never goes off. Any ideas?
Two errors
Error 1: You have to declare an id for the first button
<div><button id="test">test</button></div>
<div class="rowHidden"><button id="testHiddenButton">open the dialog</button></div>
Error 2: The # needs to be inside the selector string.
$("#testHiddenButton").click(function () {
alert("TESTTTTTTTTTTTTTTTTTTTT");
});

Categories