I'm using SimpleModal (http://www.ericmmartin.com/projects/simplemodal/) and I have a form that displays in a dialog. What I want to do is be able to have a confirmation come up each time that the user tries to close the dialog (either by escape or clicking on the close icon) and asks them if they really want to close it without saving the form data. I tried the following:
onClose: function (dialog) {
if (confirm('Are you sure you want to close without saving?')) {
$.modal.close();
}
}
But it only triggers once. If you hit cancel then fails to close again later, which kind of makes sense. Anybody have a suggestion or solution? Any help would be greatly appreciated. :)
I looked at the source of SimpleModal for you and what you are wanting to do can't be done with their code. This is why:
Just prior to calling your custom callback onClose it calls this:
s.unbindEvents();
Which effectively says "This box is going to close whether you like it or not". It is not like a normal callback which you can cancel.
I would recommend instead using the jQuery UI Dialog, which you should find super easy to implement that functionality by using their beforeclose callback. You would simply use:
beforeclose: function(){
return confirm('Are you sure you want to close without saving?')
}
I got this working using sort of what jerone was trying but also rebinding the events:
onClose: function (dialog) {
if (confirm('Are you sure you want to close without saving?')) {
$.modal.close();
}else{
this.occb = false;
this.bindEvents();
}
}
This plugin needs to be updated to support the cancel of the close event. It looks like its not really being thought of as a event in the code. I would like it to behave just like any other js event.
I've also looked at the source and when the onclosed event is executed a occb flag is enabled.
What you can try (I haven't tried it) is to override this occb as it's passed to the this variable:
onClose: function (dialog) {
if (confirm('Are you sure you want to close without saving?')) {
$.modal.close();
}else{
this.occb = false;
}
}
Hope this helps.
Related
I have a page that will have user data and questions, if they leave or reload it resets everything. It's working as expected, however, how do you run a function if the user decides to stay on the page? i've looked and can't seem to find an answer. Using jQuery but a vanilla javascript solution is ok too if jQuery doesn't have one.
$(window).bind('beforeunload', function () {
return;
});
$(window).bind('unload', function () {
reset();
});
I also don't understand the logic behind removing the ability to give a custom message in the default dialog box. That seems to be where they allowed it before. If theres a solution i missed in the search here please let me know too. Thank you
EDIT:
haven't found a way to detect a button press but adding a timeout seems to work. Although doesn't seem to be 100% but will work until someone has a better solution or knows how to detect a button press :)
var timeout;
$(window).bind('beforeunload', function () {
timeout = setTimeout(function() { console.log('do this'); }, 1000);
return;
});
$(window).bind('unload', function () {
reset();
});
I have a function I dont want to run if the broswer back button was clicked. I am attempting to use something like the below:
var backButtonClicked = false;
window.onpopstate = function() {
alert("Back clicked");
backButtonClicked = true;
};
then later I am trying to use the variable like:
if(!backButtonClicked) {
//run function if not back button clicked
}
However with the code above the alert is not getting fired when I hit the back button.
window.onpopstate = function() {
alert("back clicked");
backButtonClicked = true;
};
history.pushState({}, '');
With the code above the alert gets fired when I click the back button, however the browser doesnt navigate back to the previous page unless I click the back button for the second time. Is there something I am doing incorrect here or is there a better approach to achieve what I am trying to do?
My coding skills are not very good when I have very little time to type. But maybe an eventlistener would be another approach to the problem you can maybe consider?
For examples and reference from an excellent source:
http://www.w3schools.com/js/js_htmldom_eventlistener.asp
Hope this helps, and good luck!
I am writing a function to delete some records. on deletion there is an alert message with 'yes' and 'no' to which user needs to click to delete the record.
The problem is that I want to pass yes to this confirmation without manually clicking on the yes. how can I do this. please provide pointers.
Not saying you should do the following, but here's how one might try to bypass confirmation dialogs.
Replace the confirm function with your own function that returns true.
var realConfirm = window.confirm;
window.confirm = function () { return true; }
deleteRows();
window.confirm = realConfirm;
If you are talking about native javascript's confirm() then, you cannot do what you intend to. If you override the function, you'll not get the popup behaviour.
But if you have a custom alert box kind of thing, then assign an id to the Yes or Ok button.
Then you can do this:
document.getElementById('yesId').click(); //this will trigger a click.
And yes, as Will Newton said, if you don't wanna press the button, just use Return or Enter button.
I have a Fancybox with two buttons in it: Merge and Cancel. Cancel closes the fancybox and Merge posts a form and wait for the page to reload. It takes a couple of seconds for the page to reload so after the user has pressed Merge I disable the Cancel button and I would like to set the option modal to true but I can't seem to find a way to set an option on a already opened fancybox. Does anyone have any suggestion on how to do this?
Playground: http://jsfiddle.net/vCtVq/
There is no simple option to toggle "modal" state, fancyBox is either modal or not. But I can think of two solutions.
1) Hide close button and unbind click event on the overlay -
$('#merge').click(function() {
$('#cancel').attr("disabled", "disabled");
$('.fancybox-item').hide();
$('.fancybox-overlay').unbind();
console.log('submit');
});
Demo - http://jsfiddle.net/am8d3/
2) Create a global variable, and check it using "beforeClose" callback. You can cancel closing by returning "false" -
var busy = false;
$(".o").fancybox({
//modal: true
beforeClose: function() {
if (busy) {
return false;
}
}
});
Demo - http://jsfiddle.net/MLjAT/
Fancybox is initilized once when the function is ran and cannot be reinitilized with different options I'm pretty sure. What you can do is create a flag and use some more traditional javascript to control the closing behavior. Set modal to true from the get go, and instead handle the close with a body click event. Then, have a true/false flag set determining if merge was clicked that does or doesn't allow the window to close on a body click. Something like this:
$('body').click(function(e) {
if (allowClose == true) {
$.fancybox.close();
}
})
I've updated you're fiddle with this solution here.
So...
I need to click [Stay on this page] automatically in such a prompt:
Confirm navigation: [Leave this page] [Stay on this page]
The code that invokes this is
$(window).bind('beforeunload', function() {
return 'Leave page?';
//Click prompt code goes here.
$(window).unbind();
});
If I take away return 'Leave page?';
then the iframed page overrides the top frame and the user is struck with an unknown site, maybe there's another way to do this?
Actually that would hook into the onbeforeunload event:
$(window).bind('beforeunload', function() {
return 'Leave page?';
});
Instead of automatically clicking it, check if you can automatically disable window.onbeforeunload event handlers. That's most likely much easier than trying to send a click to a specific button in a modal window anyway.
I agree with Thiefmaster.
Alternative is to replace the alert, prompt or confirm if that is what is used:
window.confirm=function() {
// here you do what you want
}