Show modal when using javascript confirm - javascript

I have the following function that will show a modal:
confirmModal: function (message) {
// CODE TO SHOW MODAL HAS BEEN REMOVED FOR THIS QUESTION //
}
And because it's been namespaced it's called like: uiModal.confirmModal('Test message');
Inside the modal I have two buttons:
<button class="cancel">Cancel</button>
<button class="ok">Ok</button>
Now what I want to do is two things:
When I do something like: onsubmit="confirm('Are you sure?');" or onclick="confirm('Are you sure?');" it will show the modal instead of an alert box. Note that it needs to work for both links and form submits.
The two buttons in the modal need to either cancel or allow the request to happen. I have already got the cancel to close the modal fine so it's just a case of allowing or denying the request to happen.
Can anyone help? I've looked at some other questions on here and seen bits about using window.location($(this).attr('href')) but that would only work on links and not for the submit of a form.
I've also looked at doing window.confirm = uiModal.confirmModal('message'); but how would I use that in my example of an onclick or onsubmit
Thanks

This doesnt work because confirm is a blocking call (the javascript won't continue when the box is open), while your modal dialog isn't.
You can solve it by doing something like:
// have some temp var that holds confirmation state
var isConfirmed = false;
$("form").submit(function () {
// when someone tries to submit the form, verify whether it's confirmed
if (!isConfirmed) {
// show modal dialog
// prevent direct submit
return false;
}
});
// when hitting the OK button in the modal, change the confirmation state
$(".modal .ok").click(function () {
isConfirmed = true;
// and re-submit the form
$("form").submit();
});

Related

How to re-open Bootstrap modal accidentally closed

I have a few different modals on a page, and it all works as it should, but if a user makes some input on form fields in a modal and then accidentally clicks outside of the modal (which closes it), they loose their changes, since if the user clicks the same button they pressed to open the modal, the data they entered will be overwritten with data pulled from the database.
So I'd like to have a function for "reopen last closed modal" that simply shows the modal again in it's last used state - with whatever data was in it.
Essentially like a Ctrl-Z for accidentally closing a modal.
It's really simple if you know the ID of the modal. Such as:
$('#myModal1').modal('show'); });
But because I have several different modals available on a page, and I don't want to have a bunch of "restore" buttons, I need to be able to detect the ID of the last closed modal.
If there's not a simpler way, I could capture the ID each time a modal is closed, and then use that ID if the modal needs to be reopened without changing its data. Something like this:
$('#myModal1').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal1';
})
$('#myModal2').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal2';
})
function reOpen() {
$(LastModal).modal('show');
}
But I'm guessing there's a way that's simpler and doesn't require me to state all my modals ID's in JS/jQuery. Any ideas?
I've made a few tweaks, and this is working well for me now, with essentially no other hassle than a few short lines of code in my script file.
var LastModal;
$('.modal').on('hidden.bs.modal', (e) => {LastModal = $(e.target).attr('id'); })
function reOpen() { $('#'+LastModal).modal('show');}
Just use the style class "modal" for your modals, and to call the "reOpen", just have something like:
<span onclick='reOpen();'>Reopen</span>
Thanks #marekful for your suggestion!
Also, if you want to access this (or any other function) by pressing Ctrl+Z, you can add this:
// press Ctrl+Z to restore modal
$(document).keydown(function(evt){
if (evt.keyCode==90 && (evt.ctrlKey)){
evt.preventDefault();
reOpen();
}
});

Show popup message when click Browser Back button Using Javascript

When user click on browser back button, user will see a alert message for that I am using below code.
window.onbeforeunload = function () { return "If you want to go back to previous page Please use Previous step Button in below"; };
But in the code I have written "If you want to go back to previous page Please use Previous Step Button in below". This message is not displaying in alert box,instead of that message it is showing another message:
.
How can I display my own message in the alert box?
You will need to put javascript/jquery code you want to use on a handler for beforeunload event
window.addEventListener("beforeunload", function (event) {
//your code goes here. Create modal window or whatever you need
});

Remove a Leave button using javascript [duplicate]

I have the following beforeunload function which I have stolen from sonewhere else....
$().ready(function() {
$("#posManagerLoginForm").trigger("submit");
$(window).bind("beforeunload", function(){
window.setTimeout(function () {
window.location = "home.htm";
}, 0);
window.onbeforeunload = null; // necessary to prevent infinite loop that kills your browser
return "Press 'Stay On Page' to go to Reporting Manager home";
});
});
Regardless of what option I select I get navigated to home.htm. Is there a way that I can make the dialog box an ok button instead of the default "Leave Page" or "Stay on page" options?
Or perhaps someone else could make a suggestion on hot to better handle?
thanks
You cannot override the styling of the onbeforeunload dialog. Believe me, I tried this before in my earlier projects.
Reference: http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
It is built into the browser object, and you have no control over it.
You can however set your own dialog to show when the onbeforeunload event triggers, but it will not disable that the regular one will show. Quite annoying, yes.
The reason you're still getting redirected is because you're actually doing nothing to prevent it.
If you want to open an alert box before the form gets submitted, make sure the default behaviour is prevented (which is to submit the form), then redirect after OK has been clicked like this:
$().ready(function() {
$("#posManagerLoginForm").submit(function( event ) {
event.preventDefault();
alert("Press 'OK' to go to Reporting Manager home");
window.location = "home.htm";
});
});
Though not sure what the use of this would be. If you wanted to stay on the form if a different button is pressed (say 'Cancel' for example), then you'd rather want to use a 'confirm' like this:
$().ready(function() {
$("#posManagerLoginForm").submit(function( event ) {
event.preventDefault();
if confirm(("Press 'OK' to go to Reporting Manager home"))
window.location = "home.htm";
});
});
You could replace the alert or confirm with a custom dialog box too, depending on what library you're using. Just make sure you put window.location = "home.htm" inside the dialog's function, otherwise it will execute immediately.
As an example, you may want to have a look into jQuery UI's dialog here: https://jqueryui.com/dialog/

Pop-up a message after redirect to another page

So basically i have everything ready, but i'd like a pop-up message appear after the user redirect to another page.
so i am currently use jquery
$('#btn_save').click(function (){
$('#message-box').slideDown('slow').delay(3500).slideUp('slow');
});
I do not know if i should use ajax instead, i know i may use route and if(session) to do it but i am new to ajax and will happy to got an example as reference.
Many thanks
UPDATE 1:
This the part of my submit button which redirect the user after submit:
var $btn_save = $("#btn_save");
$btn_save.click(function () {
//todo form validation
if(!$(".sa-alert-name-existed").hasClass('hidden')){
return
}
$.post(api_submit, postData).done(function (data) {
location.href = "/buzz#tab_pane_fbpage";
});
Then we should come to the js part, which popup a message when onclick the submit button
$('#btn_save').click(function (){
$('#message-box').slideDown('slow').delay(3500).slideUp('slow');
});
enter code here

jQuery Exit Popup Redirect?

So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});
This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "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?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18
Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});
Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.
Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}

Categories