I've a simple approach for performing a click event on a button using js/jquery
<c:if test="${param.error eq true}">
<button id="btn-id" style="visibility = hidden;">Do Click Me</button>
<script type="text/javascript">
$(window).load(function() {
$("#btn-id").trigger("click");
});
</script>
</c:if>
with all this when I submit the form and error parameter comes true I get loop of calls on
$("#btn-id").trigger("click");
how can I restrict click to one time only?
Something like this?
<script type="text/javascript">
var buttonClicked = false;
$(window).load(function() {
if(!buttonClicked){
$("#btn-id").trigger("click");
buttonClicked = true;
}
});
</script>
Related
There are a ton of questions on SO asking why jQuery method 'submit()' is NOT triggering submit event.
I am asking the exact opposite:
Why is jQuery triggering submit event when calling submit method and how to get around this?
Here a simple JSFiddle showing the problem:
https://jsfiddle.net/vncu675x/
$(function () {
var i = 0;
$("form").find(":submit").text(Math.random());
$("form").submit(function (e) {
e.preventDefault();
if (confirm("Are you sure? " + i++)) {
$("form").submit();
}
});
});
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
</head>
<body>
<form action="/">
<button type="submit">Submit</button>
</form>
</body>
</html>
I think it's a jQuery matter because pure JavaScript implementation is working as expected.
The line
$("form").submit();
is the same as $("form").trigger("submit") - ie it raises the submit event, which is the event that you're handling.
Instead, use the js native submit event by converting the jquery object to a DOM object:
$("form")[0].submit();
Even though they have the same name (submit) the two functions are for different types so have different actions.
Updated snippet:
$(function () {
var i = 0;
$("form").find(":submit").text(Math.random());
$("form").submit(function (e) {
e.preventDefault();
if (confirm("Are you sure? " + i++)) {
$("form")[0].submit();
}
});
});
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
</head>
<body>
<form action="/">
<button type="submit">Submit</button>
</form>
</body>
</html>
I have this piece of code
window.onload = function () {
$('#btnFilter').click(function (e) {
btnFilter(e);
});
}
The function works on button click but I need that the button is clicked when the page opens. I've tried things like $('#btnFilter').trigger( "click" ); but the button still not clicked on page opening. How can I achieve this thing? I can't just call the function because I get the error "Cannot read property 'currentTarget' of undefined" beacuse I don't give any event as parameter.
function btnFilter(e) {
element = e.currentTarget.parentElement;
//other code
}
You can try like this:
$(document).ready(function(){
$('#btnFilter').trigger('click');
});
$(document).on('click','#btnFilter',function(e){
btnFilter(e);
});
function btnFilter(e)
{
element = e.currentTarget.parentElement;
}
You can change your 'btnFilter' to accept the button instead of the event:
function btnFilter(element) {
element = element.parentElement;
...
}
$(function() {
$("#btnFilter").click(function(e) { btnFilter(this); return false; });
// Pass the button to the filter operation on load
btnFilter($("#btnFilter")[0]);
});
alternatively, accept the parent element directly
$(function() {
$("#btnFilter").click(function(e) { btnFilter(this.parentElement); return false; });
// Pass the button parent to the filter operation on load
btnFilter($("#btnFilter")[0].parentElement);
});
If you use jquery i would keep it coherent and not mix it with vanilla javascript. A Jquery solution is:
$(document).on("click", "#btnFilter", btnFilter);
$(document).ready(function(){$("#btnFilter").click()});
or
$(document).on("click", "#btnFilter", btnFilter);
$(document).ready(btnFilter);
In you solution the error is the event binding: when you bind the event to #btnFilter on page load, the element is not existing yet, so the function cannot be triggered.
jQuery Solution:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").trigger("click");
});
</script>
</head>
<body>
<button onclick="alert('clicked')">Click</button>
</body>
</html>
I have a page which has an event as follows:
$(document).on("click","#div",function(e){
//do the operation
});
This event gets executed on both page load as well as div click.
I need to differentiate between these two calls inside the event, because I have to write a condition extra only on div click and not on load .
How do I know if its from page load or div click?
Edit
On load:
$(default).find('a').trigger("click") ; makes it trigger on load
$(document).on("click", "#div", function(e) {
if (e.originalEvent !== undefined) {//use the originalEvent
alert('human');
} else {
alert('load click')
}
});
$('#div').click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>click</div>
//You can check for originalEvent element present in event object.
$(document).ready(function() {
$(document).on("click","#div",function(e){
if(e.originalEvent) {
alert('clicked manually');
} else {
alert('page load');
}
});
$('#div').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="div">
div
</div>
</body>
You could set a boolean variable in each of these like:
var fromPageLoad = false;
var fromDivClick = false;
$(window).load(function() {
fromPageLoad = true;
//do the operation
});
$(document).on("click","#div",function(e){
fromDivClick = true;
//do the operation
});
and then check which condition is true with an if or a switch statement.
[EDIT]
Unless you want alerts popping out of the blue like the other answers suggest settings variables as so is the way to go.
if u need to perform any action on page load you have to specify as below
$(document).load(function(){
alert("event on page load");
});
if the div click event then as below
$(#div).onclick(function(){
alert ("on div click");
})
Hi this is an odd question and i will try to ask it correctly. I have a function using javascript called load canvas.
function loadCanvas(canvas) {
relevant code here...
}
I also have a normal button called btn.
<button class="btn" type="button">Play!</button>
I am wondering can i disable the function until the play button is selected? The function is for a game using javascript. So on load there isnt anything there until i press play then it appears!
any ideas/help please?
$(document).ready(function(){
var loadCanvas= function (canvas) {
relevant code here...
}
$("#test").on('click',loadCanvas()); // using jquery
document.getElementById("test").addEventListener("click",loadCanvas()); // using javascript
<button class="btn" id="test" type="button">Play!</button>
})
If you are having issue because other method is triggering the function you can add a flag with a boolean and turn it on when you click..
Something like that:
The button don't change at all
<button class="btn" type="button">Play!</button>
The js code with this change:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
And in the on click function add this before call the function:
buttonClicked = true;
At the end your js should look like this:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
$(".btn").click(function(){
buttonClicked = true;
var canvas = ...;
loadCanvas(canvas );
});
EDIT
If you have more buttons with the class .btn you should use an id and change the selector of the .click() with the selector of the id instead of the class selector
As you mentioned in the comments <script type="text/javascript"> loadCanvas("game"); </script> You are calling the function as soon as the page loads. So you will have to change it to:
<button class="btn play-button" type="button">Play!</button>
<script type="text/javascript">
$('.play-button').click(function(e){
loadCanvas("game");}
);
</script>
If you are not using jquery you will have to handle the click event by javascript.
You got to do following:
function loadCanvas(game) {
alert('loading canvas');
}
<button class="btn" type="button" onclick="loadCanvas('game')">Play!</button>
I want to redirect the page to a different location according to the button clicked, i want something similar to this:
if(document.getElementById('button').onclick == true)
{
//redirect page
}
However this code is not working for me:
document.getElementById('button').onclick = function() {
//redirect page
};
the simplest way to do is add onclick() event in button tag.
<button id='button' onclick='redirectThePage();' >Click Me</button>
and in javascript
function redirectThePage(){
//redirect page
}
another way to do is
<button id='button'>Click me</button>
and in javascript
var button = document.getElementById('button');
button.onclick = function() { // redirect the page };
There are different ways to do the same thing.
1. addEventListener()
document.getElementById('button').addEventListener("click", function() {
redirect();
});
function redirect(){
//redirect page
}
Pro
No nesting javascript and HTML
Contra
More code
Can't see in HTML code whats happens by click
2. onclick (answered by slashy)
Note: If you find this better, all owner goes him/her.
<button id="btn" onclick="redirect()">redirect</button>
<script>
function redirect() {
//redirect page
}
</script>
Pro
Less code
You can see in HTML code what there happens by a click event
Contra
Nesting HTML and Javascript.
It can be easily acheived also with javascript:
<button id="btn" onclick="redirect()">redirect</button>
<script>
function redirect()
{
window.location = "http://www.google.com/";
}
</script>
jQuery:
$('#button').click(function(){
window.location.href = "index.php";
});
HTML:
<button id="button">Click next</button>