I have following jQuery code to prevent double clicking a button. It works fine. I am using Page_ClientValidate() to ensure that the double click is prevented only if the page is valid. [If there are validation errors the flag should not be set as there is no postback to server started]
Is there a better method to prevent the second click on the button before the page loads back?
Can we set the flag isOperationInProgress = yesIndicator only if the page is causing a postback to server? Is there a suitable event for it that will be called before the user can click on the button for the second time?
Note: I am looking for a solution that won't require any new API
Note: This question is not a duplicate. Here I am trying to avoid the use of Page_ClientValidate(). Also I am looking for an event where I can move the code so that I need not use Page_ClientValidate()
Note: No ajax involved in my scenario. The ASP.Net form will be submitted to server synchronously. The button click event in javascript is only for preventing double click. The form submission is synchronous using ASP.Net.
Present Code
$(document).ready(function () {
var noIndicator = 'No';
var yesIndicator = 'Yes';
var isOperationInProgress = 'No';
$('.applicationButton').click(function (e) {
// Prevent button from double click
var isPageValid = Page_ClientValidate();
if (isPageValid) {
if (isOperationInProgress == noIndicator) {
isOperationInProgress = yesIndicator;
} else {
e.preventDefault();
}
}
});
});
References:
Validator causes improper behavior for double click check
Whether to use Page_IsValid or Page_ClientValidate() (for Client Side Events)
Note by #Peter Ivan in the above references:
calling Page_ClientValidate() repeatedly may cause the page to be too obtrusive (multiple alerts etc.).
I found this solution that is simple and worked for me:
<form ...>
<input ...>
<button ... onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();">
</form>
This solution was found in:
Original solution
JS provides an easy solution by using the event properties:
$('selector').click(function(event) {
if(!event.detail || event.detail == 1){//activate on first click only to avoid hiding again on multiple clicks
// code here. // It will execute only once on multiple clicks
}
});
disable the button on click, enable it after the operation completes
$(document).ready(function () {
$("#btn").on("click", function() {
$(this).attr("disabled", "disabled");
doWork(); //this method contains your logic
});
});
function doWork() {
alert("doing work");
//actually this function will do something and when processing is done the button is enabled by removing the 'disabled' attribute
//I use setTimeout so you can see the button can only be clicked once, and can't be clicked again while work is being done
setTimeout('$("#btn").removeAttr("disabled")', 1500);
}
working example
I modified the solution by #Kalyani and so far it's been working beautifully!
$('selector').click(function(event) {
if(!event.detail || event.detail == 1){ return true; }
else { return false; }
});
Disable pointer events in the first line of your callback, and then resume them on the last line.
element.on('click', function() {
element.css('pointer-events', 'none');
//do all of your stuff
element.css('pointer-events', 'auto');
};
After hours of searching i fixed it in this way:
old_timestamp = null;
$('#productivity_table').on('click', function(event) {
// code executed at first load
// not working if you press too many clicks, it waits 1 second
if(old_timestamp == null || old_timestamp + 1000 < event.timeStamp)
{
// write the code / slide / fade / whatever
old_timestamp = event.timeStamp;
}
});
you can use jQuery's [one][1] :
.one( events [, data ], handler ) Returns: jQuery
Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
see examples:
using jQuery: https://codepen.io/loicjaouen/pen/RwweLVx
// add an even listener that will run only once
$("#click_here_button").one("click", once_callback);
using count,
clickcount++;
if (clickcount == 1) {}
After coming back again clickcount set to zero.
May be this will help and give the desired functionality :
$('#disable').on('click', function(){
$('#disable').attr("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>
<p>Hello</p>
We can use on and off click for preventing Multiple clicks. i tried it to my application and it's working as expected.
$(document).ready(function () {
$("#disable").on('click', function () {
$(this).off('click');
// enter code here
});
})
This should work for you:
$(document).ready(function () {
$('.applicationButton').click(function (e) {
var btn = $(this),
isPageValid = Page_ClientValidate(); // cache state of page validation
if (!isPageValid) {
// page isn't valid, block form submission
e.preventDefault();
}
// disable the button only if the page is valid.
// when the postback returns, the button will be re-enabled by default
btn.prop('disabled', isPageValid);
return isPageValid;
});
});
Please note that you should also take steps server-side to prevent double-posts as not every visitor to your site will be polite enough to visit it with a browser (let alone a JavaScript-enabled browser).
The absolute best way I've found is to immediately disable the button when clicked:
$('#myButton').click(function() {
$('#myButton').prop('disabled', true);
});
And re-enable it when needed, for example:
validation failed
error while processing the form data by the server, then after an error response using jQuery
Another way to avoid a quick double-click is to use the native JavaScript function ondblclick, but in this case it doesn't work if the submit form works through jQuery.
One way you do this is set a counter and if number exceeds the certain number return false.
easy as this.
var mybutton_counter=0;
$("#mybutton").on('click', function(e){
if (mybutton_counter>0){return false;} //you can set the number to any
//your call
mybutton_counter++; //incremental
});
make sure, if statement is on top of your call.
If you are doing a full round-trip post-back, you can just make the button disappear. If there are validation errors, the button will be visible again upon reload of the page.
First set add a style to your button:
<h:commandButton id="SaveBtn" value="Save"
styleClass="hideOnClick"
actionListener="#{someBean.saveAction()}"/>
Then make it hide when clicked.
$(document).ready(function() {
$(".hideOnClick").click(function(e) {
$(e.toElement).hide();
});
});
Just copy paste this code in your script and edit #button1 with your button id and it will resolve your issue.
<script type="text/javascript">
$(document).ready(function(){
$("#button1").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script
Plain JavaScript:
Set an attribute to the element being interacted
Remove the attribute after a timeout
If the element has the attribute, do nothing
const throttleInput = document.querySelector('button');
throttleInput.onclick = function() {
if (!throttleInput.hasAttribute('data-prevent-double-click')) {
throttleInput.setAttribute('data-prevent-double-click', true);
throttleInput.setAttribute('disabled', true);
document.body.append("Foo!");
}
setTimeout(function() {
throttleInput.removeAttribute('disabled');
throttleInput.removeAttribute('data-prevent-double-click');
}, 3000);
}
<button>Click to add "Foo"!</button>
We also set the button to .disabled=true. I added the HTML Command input with type hidden to identify if the transaction has been added by the Computer Server to the Database.
Example HTML and PHP Commands:
<button onclick="myAddFunction(<?php echo $value['patient_id'];?>)" id="addButtonId">ADD</button>
<input type="hidden" id="hasPatientInListParam" value="<?php echo $hasPatientInListParamValue;?>">
Example Javascript Command:
function myAddFunction(patientId) {
document.getElementById("addButtonId").disabled=true;
var hasPatientInList = document.getElementById("hasPatientInListParam").value;
if (hasPatientInList) {
alert("Only one (1) patient in each List.");
return;
}
window.location.href = "webAddress/addTransaction/"+patientId; //reloads page
}
After reloading the page, the computer auto-sets the button to .disabled=false. At present, these actions prevent the multiple clicks problem in our case.
I hope these help you too.
Thank you.
One way I found that works is using bootstrap css to display a modal window with a spinner on it. This way nothing in the background can be clicked. Just need to make sure that you hide the modal window again after your long process completes.
so I found a simple solution, hope this helps.
all I had to do was create a counter = 0, and make the function that runs when clicked only runnable if the counter is = 0, when someone clicks the function the first line in the function sets counter = 1 and this will prevent the user from running the function multiple times when the function is done the last line of the code inside the function sets counter to 0 again
you could use a structure like this, it will execute just once:
document.getElementById('buttonID').addEventListener('click', () => {
...Do things...
},{once:true});
I am using ngDialog dialog box for my mean.js application with the following call :
ngDialog.open({
template: 'modules/users/views/userDetails/dialog.client.view.html',
scope: $scope,
closeByDocument :false
});
Now, the dialog is opening fine and all the elements in it are also visible.
But I am not able to perform any any action on them.i.e., click a button or type in a text field. It feels like the whole dialog box is out of focus.
What is it that I am doing wrong here?
Note : Angular Animate might be disabled in my application by the following code :
$timeout(function () {
return $animate.enabled(false, angular.element(".carousel"));
});
But, the above code is in another controller.
Could this be the reason for the failure?
I solved the problem by changing the css a bit:
.ngdialog-overlay {
z-index: -1;
}
I know there are more efficient ways at doing this but I have my reasons for doing it this way. I have a modal popup window. I would like for this window to pop up as soon as the visitor loads the page. As of right now the window is reached and opened by clicking a link that takes them to index.php#login_form.
"#login_form" being what I would like to add the URL on page load. Then they can chose to exit it once it has initially loaded with the popup.
Now is there a way to do this more efficiently with out having to change my css or code very much?
Thanks!
The hash in url can be accessed through window.location.hash in javascript. You can judge this in body onload event.
To answer your question I have created a fiddle, that takes your example and solves what you are looking for. http://jsfiddle.net/sgaurav/xA4vG/
Basically what this code is doing is, selects the id of click you want to simulate and then creates a mouse event for click as per answer given here How do I simulate user clicking a link in JQuery?
$.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE
}
});
}
Now this code is used onload event of body to fake a click on the link that you are doing manually till now using
jQuery(document).load(
jQuery('#join_pop').simulateClick()
);
This in turn loads popup as soon as page opens up. You can change id in last code to the login form if you want and that will start showing up on page load instead of sign up.
One easy way is to load the page directly with the hashtag login_form:
http://www.script-tutorials.com/demos/222/index.html#login_form
Or if you want to be more "precise" you can use jquery like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<!--Place this at the end of the body tag.-->
<script>
$(function(){
window.location.hash = "login_form"; //this will add with js the #login_form hash at the end of th url
})
</script>
You can use jquery to show the modal when the window is loaded:
Try this code and you'll understand:
$(function(){
alert("Done loading");
})
You'll add the code to show the modal instead of the alert function. If the modal is shown or hidden with css, you can easily add a css class to an element with:
$(".element").addClass("showModal);
Or remove a class with:
$(".element").removeClass("hideModal");
Be sure to have the jquery library imported. I hope this answers your question.
I use this script to create a pull down box, works perfectly excepting a single thing. If i add a link in that box, pressing it will result in no action. Shortly the links don't work in this script.
Could anyone tell me what's wrong?
Script:
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function (event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
};
$(document).ready(function () {
prepareList()
});
Your event handler is trapping the click on the URL and the "return false" is cancelling it.
Try removing the false.. not sure you need it in this implementation..
Andrew
I have a typical primefaces dialog and it works great but I can't find any options to have it close when someone clicks outside the dialog. I have seen a few jquery examples and I'm guessing I can adapt those for the primefaces dialog but first wanted to make sure there wasn't a solution already?
Thanks.
Just sharing my solution that works globally for any modal dialog. Code adapted from http://blog.hatemalimam.com/get-widgetvar-by-id/ .
When you show a dialog, a mask (that has the .ui-dialog-mask class) is created, and it has the id of the opened dialog, appended with a "_modal" keyword.
This scripts gets that id when that mask is clicked, removes that appended text, and finds the corresponding widget to be closed.
To use it, just save the code on a .js file, import on your page and it will work.
Tested on Primefaces 6.0.
/**
* Listener to trigger modal close, when clicked on dialog mask.
*/
$(document).ready(function(){
$("body").on("click",'.ui-dialog-mask',function () {
idModal = this.id;
idModal = idModal.replace("_modal","");
getWidgetVarById(idModal).hide();
})
});
/**
* Returns the PrimefacesWidget from ID
* #param id
* #returns {*}
*/
function getWidgetVarById(id) {
for (var propertyName in PrimeFaces.widgets) {
var widget = PrimeFaces.widgets[propertyName];
if (widget && widget.id === id) {
return widget;
}
}
}
You can write a javascript function for onClick event and close the dialog.
<h:body onclick="closeDialog();">
function closeDialog(){
widgetWarDialog.hide();
}
I have an other solution for a "modal" primefaces dialog.
I just want to add the click event, when my button is clicked to open the Dialog. And not allways when i click anything on the body element.
Add a styleClass to your button. For example styleClass="mybutton-class".
Then add a widgetVar to your <p:dialog widgetVar="widgetVarName" ...>
jQuery(".mybutton-class").on("click", function() {
jQuery('.ui-widget-overlay').click(function(){
PF('widgetVarName').hide();
})
});
Additional for Ajax Update Events:
I build 3 JS functions.
//for the first time the page is loaded
jQuery(document).ready(function() {
onLoadFunction();
});
//to load the script after you reload your page with ajax
jQuery(document).on("pfAjaxComplete", function(){
onLoadFunction();
});
//your code you handle with
function onLoadFunction(){
jQuery(".mybutton-class").on("click", function() {
jQuery('.ui-widget-overlay').click(function(){
PF('widgetVarName').hide();
})
});
}
It is an 8 years old question, but recently I meet the same problem and here is my solution for a modal primefaces dialog.
I wrote a js function which adds a listener to overlay panel around the dialogue
function addListenerOnDialogueOverlay() {
document.getElementById('test-dialog_modal')
.addEventListener('click', function (event) {
PF('test-dialog-widget').hide();
});
}
and call the finction in "onShow" tag of the dialogue
<p:dialog id="test-dialog"
widgetVar="test-dialog-widget"
modal="true"
onShow="addListenerOnDialogueOverlay()">