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
Related
I have two or more buttons on Kendo UI Window, which all will call .close() event sooner or later after some business logic.
For example, below screen: 'Close' button will directly close the window but 'Save' button will check some condition and then trigger the close.
Now, I have added my conditions on
that.bind('close', function(){
//check some condition
// here if condition met, let the flow continue else call preventDefault()
});
This interception triggers when both the button is clicked. How do I check which button triggered the event?
FYA, I have extended the Kendo UI Window widget hence the that.bind() interception is in place.
$("#closeBtnId").bind("click", function () {
});
$("#saveBtnId").bind("click", function () {
});
try adding an event in your function and that should allow you to check who's calling that function. Something like this:
that.bind('close', function(e){
var clickedButton = e.currentTarget || e.target || e.sender;
//check some condition
// here if condition met, let the flow continue else call preventDefault()
});
In case the close (X) is pressed, Boxy doesn't wait for a confirmation. Below is an example describing my problem:
$('form .close').click(function(event) {
event.stopPropagation();
Boxy.confirm("Are you sure ?", function() {
alert('ok');
});
return false;
});
However, when the OK button is clicked, everything works as expected.
Why does this not work as expected in case the (X) is pressed?
Please see this example that I made for you: http://jsfiddle.net/972ak/
$('form .close').click(function(event) {
Boxy.confirm("Are you sure ?", function() {
alert('ok');
});
return false;
});
Boxy documentation says:
Boxy.confirm(message, callback, options)
Displays a modal, non-closeable dialog displaying a message with OK and Cancel buttons. Callback will only be fired if user selects OK.
http://onehackoranother.com/projects/jquery/boxy/
As I have already mentioned in my comment Boxy.confirm is async unlike native confirm. Your code will continue its execution without waiting for user to click OK or Cancel. That is why you need to perform the actual action inside confirm callback.
Consider the following code.
$('form .close').click(function(e){
var form = $(this).closest('form');
Boxy.confirm('Are you sure?', function() {
form.remove(); //remove it only if user confirmed.
});
form.append('<p>Close was clicked.</p>');
})
This code will append message every time user clicks close link. But the form will be actually removed only if user confirmed the action.
http://jsfiddle.net/tarabyte/972ak/4/
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();
});
I have no idea if this is even possible, but I thought I would ask since it would be awesome if it is possible.
So basically I have a link with an onclick and in the onclick there are two calls. one to a function and another to _doPostBack.
The first function that is called is a simple function:
function CheckTerms() {
if (!document.Form.agreetoterms.checked) {
alert("Please check the terms and conditions.");
return false;
}
return true;
}
So basically if the check box isnt checked the alert happens and the page doesn't submit. If it is checked it submits. Right now even if it isn't checked, it shows the alert and executes the doPostBack and submits the page. The doPostBack is put into the link dynamically and I don't have access to it, which has made it harder for me. So any ideas or ways to abort it so it doesn't submit?
Thanks!
I'm assuming the _doPostback function handles the posting of the form, and that you don't want the anchor to move the page to the location of its href when clicked. preventDefault does this by preventing the anchor's default action from being taken when clicked.
var a = document.getElementById("yourAnchorId");
a.onclick = function(e){
e.preventDefault();
if (CheckTerms())
_doPostBack();
}
why can't you do the following:
function CheckTerms() {
if (!document.Form.agreetoterms.checked) {
alert("Please check the terms and conditions.");
return false;
}
else{
<<< call you function here >>>
}
return true;
}
I'm creating a popup window that has a beforeunload handler installed. When the "Close" file menu item is used to close the popup, the beforeunload handler is called twice, resulting in two "Are you sure you want to close this window?" messages appearing.
This is a bug with Firefox, and I've reported it here, but I still would like a way to prevent this from happening. Can you think of a sane way of detecting double beforeunload to prevent the double message problem? The problem is that Firefox doesn't tell me which button in the dialog the user elected to click - OK or cancel.
<script type="text/javascript">
var onBeforeUnloadFired = false;
window.onbeforeunload = function ()
{
if (!onBeforeUnloadFired) {
onBeforeUnloadFired = true;
event.returnValue = "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
window.setTimeout("ResetOnBeforeUnloadFired()", 10);
}
function ResetOnBeforeUnloadFired() {
onBeforeUnloadFired = false;
}
</script>
Set a variable in the handler to prevent the dialog coming up the second time. Use setTimeout to reset it afterwards.
This is definitely a FF bug. I've reported it at https://bugzilla.mozilla.org/show_bug.cgi?id=531199
The best solution I've found is to use a flag global variable that is reset after so many milliseconds, say 500 (this ensures that the function can be called again, but not immediately after its appearance).
See last code in:
http://social.msdn.microsoft.com/Forums/en/sharepointinfopath/thread/13000cd8-5c50-4260-a0d2-bc404764966d
I've found this problem in Chrome 21, Firefox 14, IE 7-9, Safari 5 (on PC).
The following works on all of these browsers. If one removes the window.onbeforeunload function during the event this will prevent the second call. The trick is to reset the window.onbeforeunload function if the user decides to stay on the page.
var window_on_before_unload = function(e) {
var msg;
// Do here what you ever you need to do
msg = "Message for user";
// Prevent next "window.onbeforeunload" from re-running this code.
// Ensure that if the user decides to stay on the page that
// this code is run the next time the user tries to leave the page.
window.onbeforeunload = set_on_before_unload;
// Prepare message for user
if (msg) {
if (/irefox\/([4-9]|1\d+)/.test(navigator.userAgent))
alert(msg
+ '\n\nThe next dialog will allow you to stay here or continue\nSee Firefox bug #588292');
(e = e || window.event).returnValue = msg;
return msg;
}
};
// Set window.onbeforeunload to the above handler.
// #uses window_on_before_unload
// #param {Event} e
var set_on_before_unload = function(e) {
// Initialize the handler for window.onbeforeunload.
window.onbeforeunload = window_on_before_unload;
}
// Initialize the handler for window.onbeforeunload.
set_on_before_unload();
Create a global variable that is set to true inside the handler. Only show the alert/popup when this variable is false.
I use the following snippet to track the exitcount
When the page loads the following variable exitCount is initialized
if (typeof(MTG) == 'undefined') MTG = {};
MTG.exitCount=0;
and in the Window unload event
$(window).bind("beforeunload", function(){
if (MTG.exitCount<=0)
{
//do your thing, save etc
}
MTG.exitCount++;
});
I've found that instead of doing your own call to confirm(), just do even.preventDefault(); within the beforeunload event. Firefox throws up its own confirm dialog.
I'm not sure if this is the correct/standard thing to do, but that's how they're doing it.
I have a document opening another popup window with window.open. In the original window I have registered (with jquery) a listener for "unload" event like this:
var popup_window = window.open(...)
$(popup_window).on('unload', function(event) ...
I have came across this page because the event was effectively triggering twice. What I have found is that it is not a bug, it triggers twice because it fires once for "about:blank" page being replaced by your page and another for your page being unloaded.
All I have to do is to filter the event that I am interested in by querying the original event:
function (event) {
var original_url = e.originalEvent.originalTarget.URL;
if (original_url != 'about:blank')
{
... do cool things ...
}
}
I don't know if this applies to the original question, because it is a special case of a window opening another, but I hope it helps.