Develop Reference

Prevent double submission with prevent window event issue

I'm using the following function to prevent double submissions:
$("#form").submit(function () {
var form = $(this);
form.find("input[type=submit]").attr("disabled", "disabled")
form.find("input[type=submit]").attr("value", "Processing");
});
It works fine, but then I have the following code which triggers an alert to avoid accidentally leaving the page:
function goodbye(e) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = '¿DO YOU REALLY WANT TO LEAVE THIS PAGE?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload=goodbye;
The problem is if the user clicks submit and the realizes he didnt want to leave the page and clicks on stay on this page instead, the submit button is still disabled.
How could I re-enable it upon clicking stay on this page?
Thanks!

The button problem
You want to disable and enable the submit button so you know you going to touch the same kind of function and object twice, it is better to make advantage out of this in a function
function disableSubmit(form, enabled){
var submit = form.find("input[type=submit]"),
dataVar = enabled !== true ? "processing-message" : "send-message",
message = submit.data(dataVar);
submit.prop('disabled', (enabled !== true) );
submit.val(message);
}
I could make it even more generic for using it on each form. But the message in the button will display whatever you put in the data-attribute.
Cancel Submit
There is a problem with cancellation of an onbeforeunload event; there is no callback for it. The solution I came with is using a timeout. Since you don't know if the person canceled or not, I think 2 seconds is enough for the page to submit.
You have to have 2 seconds patient to get the submit button enabled again. But you can adjust it all you want of course
if (e.stopPropagation) {
setTimeout(function () {
disableSubmit(formObject, true);
}, 2000);
e.stopPropagation();
e.preventDefault();
}
The JSFiddle example

Click button with spacebar

I have a button with an anchor, that I would like to trigger with the spacebar for accessibility reasons. Instead, clicking the spacebar jumps the page down when button is in focus.
Go to Stack Overflow
I have tried eating the spacebar key:
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
but of course this is not what I want. I'm not sure if mapping the spacebar key to the enter key is a smart solution, or if its possible. How can I trigger a button with the spacebar using pure JS?

You might want to look into a prevent default solution:
window.onkeydown = function(event){
if(event.keyCode === 32) {
event.preventDefault();
document.querySelector('a').click(); //This will trigger a click on the first <a> element.
}
};
That will stop the space bar from performing the default action (to send a space) and then you can add your scroll to command below that inside the function.

Give your a link an id and try this:
var link = document.getElementById("link");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
link.click();
}
};

Logout webpage when click on refresh button

I am developing a website. Where I need to logout the page when one try to refresh the page.
I got the code for logout when one click on f5 for refresh and also I got the code for disable right click on the page. but I dont know how to prevent the refresh button of browser or logout when I press refresh button. I searched many sites. But didn't get an answer.
The code I gor for F5 key is
function fkey(e){
e = e || window.event;
if( wasPressed ) return;
if (e.keyCode == 116) {
alert("f5 pressed");
wasPressed = true;
}else {
alert("Window closed");
}
}
Can anyone please help me for the issue with refresh button?

I think it will work
$("*").keypress(function(e)
{
if (e.keyCode == 116) {
e.preventDefault();
}
});

Try this:
window.onbeforeunload = function(e){
//call logout process here
}
onbeforeunload is an event that fires when a window is about to unload its resources. The document is still visible and the event is still cancelable, in other words, whenever you refresh or close a page it fires an event 'onbeforeunload'. When this event returns a non-void value, the user is prompted to confirm the page unload. In most browsers, the return value of the event is displayed in this dialog.
Reference: https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onbeforeunload

window.onbeforeunload = function(e){
//call logout process here
}
Any custom declaration on OnBeforeUnload will not be executed as the support is removed from the code. So, the above solution will not work for Chrome.
Instead, use HttpContext.GetOwinContext().Authentication.SignOut(DefaultAuthenticationTypes.ApplicationCookie);

Does onclick default to ontouch

If I have a webpage and I want to monitor clicks and touches on a div, do I have to add event listeners for each event or will a touch event act as a click event by default on mobile?

Yes, by default touching an element on a mobile device will fire its click event handler. However, this behavior is usually undesirable since it allows for a 300ms delay before the event handler function runs. See this blog post for more information.

use this mousedown()
But this will record even drag and all kinda mouse button clicks.
$('yourelementid').mousedown(function(e){
if( (e.which == 1) ) {
alert("left button");
}if( (e.which == 3) ) {
alert("right button");
}else if( (e.which == 2) ) {
alert("middle button");
}
e.preventDefault();
});
try this...

Try giving both events side by side
$('myDiv').on("mousedown touchstart", function (e) {
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/Android/i)){
//try mousemove touchmove together
// define your logic
})

prevent OnBeforeUnload() event from happening in refresh/F5

I'm using onbeforeunload event to perform operations during the closing page.
I do not want the event to happen in the case of Refresh / F5.
Is there a way or other event to do this?

Unfortunately onbeforeunload event listens the page state in the browser. Going to another page as well as refreshing will change the page state, meaning onbeforeunload will be triggered anyway.
So I think it is not possible to catch only refresh.
But, if you'll listen and prevent Keypress via JavaScript, then it can be achieved.
Refresh can be done via F5 and CtrlR keys, so your goal will be to prevent these actions.
using jQuery .keydown() you can detect these keycodes:
For CtrlR
$(document).keydown(function (e) {
if (e.keyCode == 65 && e.ctrlKey) {
e.preventDefault();
}
});
For F5
$(document).keydown(function (e) {
if (e.which || e.keyCode) == 116) {
e.preventDefault();
}
});

I would use the keydown listener to check for F5 and set a flag var.
http://api.jquery.com/keydown/
Detecting refresh with browser button is not that easy/possible.

I wanted to add a message alert onbeforeunload, so my solution was this one:
$(document).ready(function(){
window.onbeforeunload = PopIt;
$("a").click(function(){ window.onbeforeunload = UnPopIt; });
$(document).keydown(function(e){
if ((e.keyCode == 82 && e.ctrlKey) || (e.keyCode == 116)) {
window.onbeforeunload = UnPopIt;
}
});
});
function PopIt() { return "My message before leaving"; }
function UnPopIt() { /* nothing to return */ }
Third line ($("a").click...) is to avoid showing the alert when navigating between sections of the web.