click a button from a java-script function - javascript

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

Related

Captcha/JQuery - Click simulation only works once

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.

JavaScript and WordPress: button click not found by addEventListener

To prevent answers like: 'is the JavaScript file loaded?' -> Yes, it is loaded, at the footer part of the page! I have checked that with a simple message to the console, which is displayed!
But:
I've got a page with a button:
<button id="portfolio-posts-btn">Load portfolio related blog posts</button>
And a file main.js:
var portfolioPostsBtn = document.getElementById('portfolio-posts-btn');
var portfolioPostsContainer = document.getElementById("portfolio-posts-container");
if (portfolioPostsBtn) {
portfolioPostsBtn.addEventListener("click", function () {
console.log("the button was clicked!");
});
}
The text the button was clicked! should be displayed in the console, but it stays empty!
Apparently, the button click is not recognized, and thus, the var portfolioPostsBtn is false, or NULL... -> the method addEventListener() is not fired ?
I don't see the cause for this; I checked the spelling, should I use single or double quotes? Please help?
Thank you!
I've had this happen to me before, since theres two ways to do this I just used the other.
The first is onclick="function()", this is used as an attribute inside the element. Ex:
function clicked(){
alert("button clicked");
}
<button onclick="clicked();">Press me</button>
exaplaination: When you add this attribute to this element and I do believe some others when the button is clicked the specified code inside the quotes of the attibute will run. It doesn't have to be a number, e.g. onclick="alert(12+4/2);". But this is more of HTML than JavaScript using this version
The other way is using what you've got which (to me) is a lot more difficult then it needs to be. Heres my example
var b = document.getElementById("btn");
b.addEventListener("click", blogged);
function blogged(){
alert("this post has been blogged");
}
<button id="btn">Blog it</button>
This side of things has more to do with JavaScript and Event listeners. But the problem with you're code is that you're putting the event listener after you call the if statement. Here's my solution
var portfolioPostsBtn = document.getElementById('portfolio-posts-btn');
portfolioPostsBtn.addEventListener("click", function(){
check();
});
function check(){
if(portfolioPostsBtn){
console.log("posted");
}
}
<button id="portfolio-posts-btn">press this to post<button>
Presumably you have made a decision not to use jQuery. You'll need to wrap your code in an event listener so that the code is executed when the DOM is ready.
document.addEventListener("DOMContentLoaded", function(event) {
var portfolioPostsBtn = document.getElementById("portfolio-posts-btn");
var portfolioPostsContainer = document.getElementById("portfolio-posts-container");
if (portfolioPostsBtn) {
portfolioPostsBtn.addEventListener("click", function () {
console.log("the button was clicked!");
});
}
});
The answer is found in the uploading of the file page-portfolio.php!
I found out that the id="portfolio-posts-btn", added later, was not updated - could be my mistake, or the SFTP upload extension in Brackets - I did not see an error message!
Anyway, the issue is solved!
One more question: "are there methods to check if an id exists?". That could make live easier!
All contributors, thank you for your answers!

YUI jQuery calling function on page load

is there any one who is familiar with YUI jQuery frame work ?? i need very little help
please take the look at below code
It works perfect but the inputClick() is called when i press any button left or right but i dont want button, i want to call function when page loads means automatically
please help me some one.
in short I want to call inputclick(e){......} automatically when page load
i heard about domready function which is same like JQuery's document.ready function
so how should i call inputClick(e)??
please take look at this ::
<section id="btns">
<p>
<input type="button" value="Left">
<input type="button" value="Right">
</p>
</selection>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script>
document.querySelector('#btns').addEventListener("click", inputClick, false);
function inputClick(e){
var a = e.target.value;
window.alert(a); // displays Left or Right button value
}
</script>
i tried inputClick(Left); and inputClick(Roght); but do nothing :(
What i need is when page load ::
rnd = random(2);
switch(rnd)
case 1:
inputClick(Left);
case 2:
inputClick(Right);
i DONT want button or eventlistener
I hope this helps. http://jsfiddle.net/Rh7Ju/1/
Know that anything in the YUI().use() will execute when the DOM is ready.
YUI().use('node', 'event', function (Y) {
function inputClick(button_value) {
alert(button_value);
}
// called when the buttons are clicked
Y.one('#btns').on('click', function (e) {
inputClick(e.target.get('value'));
}, 'input');
inputClick('Right'); // called when the dom is ready.
});
After I looked at your question again, is seems like you are trying to randomly select a button and alert its value. So, maybe this is more what you're looking for?
http://jsfiddle.net/Rh7Ju/2/
Anyway, happy coding.

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 :).

Categories