Develop Reference

fire jquery focus out when only the input focus is changed

I use the following code to add the selected div value into a input.
var lastFocus;
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
//addOrRemoveWatermark(lastFocus);
$(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
});
$('.del').click(function(e){
e.preventDefault();
e.stopPropagation();
//addOrRemoveWatermark(lastFocus);
$(lastFocus).val(function(index, text){
return text.replace(/(\s+)?.$/, '');
});
})
below is a sample image if the input panel I have! This is developed for a touch device and hence the key pad.
The script works fine to add value on each button press in the keypad. The problem I'm facing is for the room number I want to run an ajax call after the user has entered the amount. But since the focus is removed every button click, how can I run the script when the focus is changed to another input. I tried the jquery .focusout() method but it gets fired each and every time the user clicks on a number button.
if anyone can suggest me a work around that would be a great help!
thank you!

Perhaps you could delay the request with something like the following:
var roomNoChanged = false;
$('#room-number').change(function() {
roomNoChanged = true;
});
$('#table-number, #no-of-guests').focus(function() {
if(roomNoChanged) {
roomNoChanged = false;
$.post(...)
}
});

Javascript Window.onbeforeunload trapping control that fired event

I have an C#.NET MVC3 web app and I have a question related to the attached Stackoverflow question. I am using a window.beforeunload event to see if there have been changes made on my View. If so, I alert the user that they have unsaved changes. However, if they selected the Create (submit) button, the dialog alerting the user still pops up. I want to NOT pop up the dialog if the Create button is selected. Any ideas? Is there a way to see which control was clicked?

I can think of 2 solutions:
$('#submitBtn').click(function() {
unbindOnBeforeUnload();
});
// OR
// maybe you have multiple cases where you don't want this triggered,
// so this will be better
var shouldTriggerOnBeforeUnload = true;
$('#submitBtn').click(function() {
shouldTriggerOnBeforeUnload = false;
});
...
$(document).unload(function() {
if (shouldTriggerOnBeforeUnload) {
confirm();
}
});
I've written it in a jQuery-like syntax, but only to keep the code concise, you can adapt it to anything you want.

Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?

I am popping up a dialog box when someone tries to navigate away from a particular page without having saved their work. I use Javascript's onbeforeunload event, works great.
Now I want to run some Javascript code when the user clicks "Cancel" on the dialog that comes up (saying they don't want to navigate away from the page).
Is this possible? I'm using jQuery as well, so is there maybe an event like beforeunloadcancel I can bind to?
UPDATE: The idea is to actually save and direct users to a different webpage if they chose cancel

You can do it like this:
$(function() {
$(window).bind('beforeunload', function() {
setTimeout(function() {
setTimeout(function() {
$(document.body).css('background-color', 'red');
}, 1000);
},1);
return 'are you sure';
});
});
The code within the first setTimeout method has a delay of 1ms. This is just to add the function into the UI queue. Since setTimeout runs asynchronously the Javascript interpreter will continue by directly calling the return statement, which in turn triggers the browsers modal dialog. This will block the UI queue and the code from the first setTimeout is not executed, until the modal is closed. If the user pressed cancel, it will trigger another setTimeout which fires in about one second. If the user confirmed with ok, the user will redirect and the second setTimeout is never fired.
example: http://www.jsfiddle.net/NdyGJ/2/

I know this question is old now, but in case anyone is still having issues with this, I have found a solution that seems to work for me,
Basically the unload event is fired after the beforeunload event. We can use this to cancel a timeout created in the beforeunload event, modifying jAndy's answer:
$(function() {
var beforeUnloadTimeout = 0 ;
$(window).bind('beforeunload', function() {
console.log('beforeunload');
beforeUnloadTimeout = setTimeout(function() {
console.log('settimeout function');
$(document.body).css('background-color', 'red');
},500);
return 'are you sure';
});
$(window).bind('unload', function() {
console.log('unload');
if(typeof beforeUnloadTimeout !=='undefined' && beforeUnloadTimeout != 0)
clearTimeout(beforeUnloadTimeout);
});
});
EDIT: jsfiddle here

Not possible. Maybe someone will prove me wrong... What code do you want to run? Do you want to auto-save when they click cancel? That sounds counter-intuitive. If you don't already auto-save, I think it makes little sense to auto-save when they hit "Cancel". Maybe you could highlight the save button in your onbeforeunload handler so the user sees what they need to do before navigating away.

I didn't think it was possible, but just tried this idea and it works (although it is some what of a hack and may not work the same in all browsers):
window.onbeforeunload = function () {
$('body').mousemove(checkunload);
return "Sure thing";
};
function checkunload() {
$('body').unbind("mousemove");
//ADD CODE TO RUN IF CANCEL WAS CLICKED
}

Another variation
The first setTimeout waits for the user to respond to the browser's Leave/Cancel popup. The second setTimeout waits 1 second, and then CancelSelected is only called if the user cancels. Otherwise the page is unloaded and the setTimeout is lost.
window.onbeforeunload = function(e) {
e.returnValue = "message to user";
setTimeout(function () { setTimeout(CancelSelected, 1000); }, 100);
}
function CancelSelected() {
alert("User selected stay/cancel");
}

window.onbeforeunload = function() {
if (confirm('Do you want to navigate away from this page?')) {
alert('Saving work...(OK clicked)')
} else {
alert('Saving work...(canceled clicked)')
return false
}
}
with this code also if user clicks on 'Cancel' in IE8 the default navigation dialog will appear.

Custom beforeunload prompt with javascript

I'm trying to setup an exit survey so that when a user leaves our checkout page they are prompted asking them why they're leaving.
Is this possible?
I've spent some time on Google but it appears as though the only solution is a simple browser-controlled confirm-like prompt. Is this true?
update
The following confirm dialog never appears, the page just changes or exits. How can I prevent the page from changing/exiting until I wait for a user's response. I guess I should ask, how can I resume a user's exit/page change action after using e.preventDefault(); ?
jQuery(window).bind('beforeunload', function() {
return function () {
alert('x');
setTimeout(50000, function () {
confirm('you sure?');
});
}();
});

If you are using jQuery you can just do
$(window).unload( function() {
//statements
});

You can do anything you want in the onunload event of the browser:
body.onunload = function() {
foo();
bar();
}

As suggested by levu, use the onunload event in combination with a custom modal dialog, such as thickbox - http://jquery.com/demo/thickbox/

Detect a press on a link and invoke an event?

I need to invoke an event (for example - display alert) if a user presses on a link (not clicks) - and I don't want it to redirect him to another page. In other words - when a user clicks a link - everything is as usual but when the user presses the link, just the event happens (the alert is displayed) and the user will stay in my page. Is this possible?
By saying press I mean that a user presses on a link for at least one second.
Thanks.

After you refined your question, this code does what you are looking for:
<script>
var timeout;
function onMouseDown(){
timeout = window.setTimeout("alert(1)",1000);
}
function onMouseUp(){
window.clearTimeout(timeout);
}
</script>
click
Notes:
The return false causes the href not to be executed,
The timeout set and clear makes sure that a press of less than a second, won't fire the event
This will fire the alert if the user presses and holds the mouse over 1 second (1000 ms) on the link.

Define press.
You probably want to use either the mousedown or keypress event, depending on what you mean. (The latter case would probably involve checking the event to make sure it was the enter key that was used)

What I understood is that you want:
user pressed the link -> fire an action, but don't redirect the browser
User clicks the link (mouse up over the same object where you pressed the button) -> redirect to a different page
The following code might help
<html>
<head>
<script type="text/javascript">
function mouse_pressed(){
alert('pressed button');
}
function goToLink(url){
window.location = url;
}
</script>
</head>
<body>
<label onclick="goToLink('http://www.google.com');" onmousedown="mouse_pressed();" >text</label>
<body>
</html>

In Jquery you can do this in a simple way.
$("a").live('click',function(){
event.preventDefault();
});