So I've been trying to prompt a confirmation before a page unloads but I don't want this default ok cancel browser confirmation popup so following the examples on how to do this I've been trying to replace it with a Devexpress popup or confirmation dialogs without success, I am fairly new to javascript and don't really get what's causing the issue.
function confirmExit(data){
setTimeout(function (){
var result = DevExpress.ui.dialog.confirm("Are you sue","Confirm");
result.done(function (retVal){
if (retVal == true) {
return true;
}
else {
window.stop();
return false;
}
});
});
}
$(window).bind('beforeunload', confirmExit);
the difference between normal confirm and devexpress popup or confirm dialog is that the later returns a promise .. but for some reason the code above doesn't even stop the page from unloading.
any direction and help would be greatly appreciated.
Bad news, what you are looking for cannot be done with the beforeunload event. I show you below a code that would work. The following code would show the browser's default alert with the message "If you exit the existing changes will be lost" or something like that. This is because the event is fired only when you interacted with the page and then want to exit.
window.addEventListener("beforeunload", (e) => {
//console.log(e)
let dialogText = "something";
e.returnValue = dialogText;
return dialogText;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" />
<a href="./test.html">exit</a>
</body>
</html>Each browser works a little differently with this event, but in short. If you don't return at the end it won't work. Simply displaying a custom message is not possible. You can find more information here: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
If in your case you want to display a warning message when a user clicks on a link, you can do the following. Create a button and style it as a link. Bind the button to a click event that will open the custom modal. And in the confirm button of the modal assign a click event that redirects to the destination page. Here is an example with bootstrap:
function exit(){
window.location.replace("https://stackoverflow.com/questions/71811083/using-a-devexpress-custom-confirm-popup-on-pageunload/71878906?noredirect=1#comment127031969_71878906")
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<!-- Button trigger modal -->
<a
type="button"
class="fs-2"
title="https://stackoverflow.com/questions/71811083/using-a-devexpress-custom-confirm-popup-on-pageunload/71878906?noredirect=1#comment127031969_71878906"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Go to a third party page
</a>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Personalized Message</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Are you sure","Confirm</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary" onclick="exit()">Confirm and Exit</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>This is a basic idea. You can create code to do this with all the links on your website or just one.