We Keep Coding

Return value to click callback

I have an <asp:Button name="theButton"> that I handle clicks in using jQuery. I display a custom jQuery UI confirm dialog when the button is pressed.
I've made 2 callbacks; one for the "yes"-click and one for the "no":
$('input[name="theButton"]').click(function(){
myPopUpMethod(function(){
//user pressed "yes" - perform postback
//(return true won't do anything here)
}, function(){
//user pressed "no" - don't postback
});
});
If I use a standard confirm() I could just do something like:
return confirm('are you sure?');
But how do I return true or false to the "outer click function" in my first example?

Because the jQuery dialog doesn't block the thread, your click function is always going to return immediately, so you need to do return false; at the end regardless of the dialog result so that the form doesn't get posted.
What I normally do is check for the existence of a data attribute on the button which if present will allow the form to submit, for example:
$('input[name="theButton"]').click(function(){
var $btn = $(this);
if($btn.data("dosubmit") == "true")) {
return true;
}
myPopUpMethod(function(){
$btn.data("dosubmit", "true").trigger("click");
}, function(){
// Do Nothing
});
return false;
});
The first time this is called, the jQuery UI dialog will popup and the method will block the form submit. Once the user clicks "Yes" on the dialog, the data-dosubmit attribute will be set and the button click triggered again. At this stage, the method sees the data-dosubmit attribute and attempts to submit the form.

Js Temporary Stop Progress of click()

I am looking the way to stop the progress of button click until confirmation had made.
Please advice a way to stop the progress temporary until 'Show Confirm Box' return true. Now my function will keep running forward regardless it.
.click(function(){
//Show Confirm Box <- will return true of false
//Start Process if true;
});
Thank you very much.

Calls to confirm() are synchronous. That is, until the user closes the box, your code is effectively paused.
if (confirm('some message')) {
// User confirmed, do something here
}
Now, if you are not using confirm(), and are instead using your own custom modal dialog or something similar, then you will need to use callbacks.
You should not block your script from executing, as the page will appear locked up to the user. Instead, pass a callback function to your function that shows your dialog, and let your dialog call that function when you are done.
function showDialog (confirmCallback) {
// Show dialog here
if (result === 'yes') { // replace this, obviously
confirmCallback();
}
}
.click(function(){
showDialog(function () {
// start process
});
});

The parameter to the click event is a function handler which will get executed when the click event occurs.
So You can always return from that function when the confirmation dialog is returned a false value.
Code will be like this
jQuery(".button").click( function(){
var ans = confirm("Do you want to proceed further ?");
if(!ans) return;
alert("Now you can code the rest ");
});​
I've created a fiddle , check this below
http://jsfiddle.net/shidhincr/Ubj7S/1/

did you see this question?
pausing execution in custom confirm box
just split up the code and call the functions according to the users input from the confirm box

window.onbeforeunload - Only show warning when not submitting form [duplicate]

This question already has answers here:
How to disable beforeunload action when user is submitting a form?
(7 answers)
Closed 7 years ago.
I am using window.onbeforeunload to prevent the user from navigating away after changing values on a form. This is working fine, except it also shows the warning when the user submits the form (not desired).
How can I do this without showing the warning when the form submits?
Current code:
var formHasChanged = false;
$(document).on('change', 'form.confirm-navigation-form input, form.confirm-navigation-form select, form.confirm-navigation-form textarea', function (e) {
formHasChanged = true;
});
$(document).ready(function () {
window.onbeforeunload = function (e) {
if (formHasChanged) {
var message = "You have not saved your changes.", e = e || window.event;
if (e) {
e.returnValue = message;
}
return message;
}
}
});

Using the form's submit event to set a flag might work for you.
var formHasChanged = false;
var submitted = false;
$(document).on('change', 'form.confirm-navigation-form input, form.confirm-navigation-form select, form.confirm-navigation-form textarea', function (e) {
formHasChanged = true;
});
$(document).ready(function () {
window.onbeforeunload = function (e) {
if (formHasChanged && !submitted) {
var message = "You have not saved your changes.", e = e || window.event;
if (e) {
e.returnValue = message;
}
return message;
}
}
$("form").submit(function() {
submitted = true;
});
});

you could use .on() to bind onbeforeunload and then use .off() to unbind it in form submission
$(document).ready(function () {
// Warning
$(window).on('beforeunload', function(){
return "Any changes will be lost";
});
// Form Submit
$(document).on("submit", "form", function(event){
// disable warning
$(window).off('beforeunload');
});
}

You can handle the submit() event, which will occur only for your form submission.
Within that event, set your flag variable formHasChanged to false to allow the unload to proceed. Also, just a suggestion, but since the purpose of that flag variable will have changed, so you may want to rename it something like 'warnBeforeUnload'
$(document).submit(function(){
warnBeforeUnload = false;
});

I was looking for a better solution to this. What we want is simply exclude one or more triggers from creating our "Are you sure?" dialog box. So we shouldn't create more and more workarounds for more and more side effects. What if the form is submitted without a click event of the submit button? What if our click-handler removes the isDirty status but then the form-submit is otherwise blocked afterwards? Sure we can change the behaviour of our triggers, but the right place would be the logic handling the dialog. Binding to the form's submit event instead of binding to the submit button's click event is an advantage of the answers in this thread above some others i saw before, but this IMHO just fixes the wrong approach.
After some digging in the event object of the onbeforeunload event I found the .target.activeElement property, which holds the element, which triggered the event originally. So, yay, it is the button or link or whatever we clicked (or nothing at all, if the browser itself navigated away). Our "Are you sure?" dialog logic then reduces itself to the following two components:
The isDirty handling of the form:
$('form.pleaseSave').on('change', function() {
$(this).addClass('isDirty');
});
The "Are you sure?" dialog logic:
$(window).on('beforeunload', function(event) {
// if form is dirty and trigger doesn't have a ignorePleaseSave class
if ($('form.pleaseSave').hasClass('isDirty')
&& !$(event.target.activeElement).hasClass('ignorePleaseSave')) {
return "Are you sure?"
}
// special hint: returning nothing doesn't summon a dialog box
});
It's simply as that. No workarounds needed. Just give the triggers (submit and other action buttons) an ignorePleaseSave class and the form we want to get the dialog applied to a pleaseSave class. All other reasons for unloading the page then summons our "Are you sure?" dialog.
P.S. I am using jQuery here, but I think the .target.activeElement property is also available in plain JavaScript.

Is there a way to capture the alert ok button click event?

Is there a way to capture the alert ok button click event? In jQuery?

The alert() function is synchronous and you can't verify what was clicked (it does not return anything), so the code below the call will be executed after it is closed (ok or close button). The alert is not used to gain user input. It is an alert, a message to the user. If you need to check what the user want, you should use confirm(). Note that the function name tells its purpose like alert.
Something like:
// if the ok button is clicked, result will be true (boolean)
var result = confirm( "Do you want to do this?" );
if ( result ) {
// the user clicked ok
} else {
// the user clicked cancel or closed the confirm dialog.
}

Alert is a blocking function, means, if you don't close it, the code below will not execute.
So you don't have to capture the alert close event, just write down the code below that alert, when alert window will be closed the code below will be executed automatically.
See example below:
alert("Close Me");
// Write down the code here, which will executed only after the alert close
console.log("This code is executed after alert")

Disclaimer: This is a very bad thing to do.
Technically you could hook into it with this code:
window.alert = function(al, $){
return function(msg) {
al(msg);
$(window).trigger("okbuttonclicked");
};
}(window.alert, window.jQuery);
$(window).on("okbuttonclicked", function() {
console.log("you clicked ok");
});
alert("something");
​
Demo: http://jsfiddle.net/W4d7J/1/

There is no event for the window.alert(). Basically the next line after it is called when they click ok. I am not sure why you would need to listen for it.

I tried this in a site I created and it worked perfectly :
<< Back

You could use JAlert and assign a click handler to the ok button.
Something like
jAlert("Alert message goes here.");
$('#popup_ok').bind('click',function(){
//Do operation after clicking ok button.
function_do_operation();
});

Trouble adding success flag to onbeforeunload

having issues with onbeforeunload. I have a long form broken into segments via a jquery wizard plug in. I need to pop a confirm dialog if you hit back, refresh, close etc on any step but need it to NOT POP the confirm dialog on click of the submit button. had it working, or at least I thought, it doesn't now.
<script type="text/javascript">
var okToSubmit = false;
window.onbeforeunload = function() {
document.getElementById('Register').onclick = function() { okToSubmit = true; };
if(!okToSubmit) return "Using the browsers back button will cause you to lose all form data. Please use the Next and Back buttons on the form";
};
</script>
'Register' is the submit button ID. Please help!

The problem is that the onclick event handler will not be called prior to if(!okToSubmit). All you are doing when you say:
document.getElementById('Register').onclick = function() { okToSubmit = true; };
Is just setting up the event handler. You are not actually retrieving the value of okToSubmit.
One way to fix this might be to setup the onclick event handler before registering onbeforeunload.

Plain old JS syntax a little rusty, so here it is in jQuery if anyone ever needs it, this works, at least for a form submit button. Change method to get if it suits your needs
<script type="text/javascript">
$(document).ready(function(){
var action_is_post = false;
$("form").submit(function () {
action_is_post = true;
});
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (!action_is_post)
return 'Using the browsers back, refresh or close button will cause you to lose all form data. Please use the Next and Back buttons on the form.';
}
});
</script>