Is there a way to activate Toast notification before the window's onbeforeunload event?

Question

Is there a way to activate Toast notification before the window's onbeforeunload event?

Here's a snippet of JavaScript that I have been working on. It currently pops up an alert when someone tries to leave a form without completing it. However, my goal is to display a Toast notification first with some additional information informing the user that all their work will be lost.

The issue I'm facing is that the Toast only appears after the window alert, but I want it to show before. Is there a way to achieve this? The Toast doesn't require any interaction at this point; I simply want it to provide a brief message in the bottom right corner of the screen indicating that the process will reset.

<script>
window.onbeforeunload = () => {
    console.log(window.in_progress);
    const toastLiveExample = document.getElementById('liveToast')
    const toast = new bootstrap.Toast(toastLiveExample)
    toast.show()
    if(window.in_progress > 0){
        console.log(window.in_progress);
        return true;
    };   
};
</script>

javascript bootstrap-5 toast

Answer 1

Answer №1

I am unable to locate the alert() function in your code. However, it seems like the issue you are experiencing is due to the alert appearing before the toast animation completes. To resolve this, ensure that the alert is triggered after the toast has finished animating. You can achieve this by adding the following snippet to your code (ensure it only executes once as it appends a new event listener to the toast each time it is called):

toast.addEventListener('shown.bs.toast', () => { // This runs after the toast becomes visible to the user
  // Trigger the alert here
  alert("Your alert text");
})

update

It appears there is no way to remain on the page while preventing the default browser pop-up [2], which means the toast cannot fully animate before the pop-up appears.

I also explored the option of creating a custom pop-up after the toast display; however, determining the user's intended destination for navigation upon clicking 'confirm' proved challenging [3].

In light of these constraints, the only solution I can propose is to disable the toast animation entirely by adding the

data-bs-animation="false"

attribute to the toast's HTML [4]. This should allow the toast to be displayed before the pop-up triggers.

Answer 2

I am unable to locate the alert() function in your code. However, it seems like the issue you are experiencing is due to the alert appearing before the toast animation completes. To resolve this, ensure that the alert is triggered after the toast has finished animating. You can achieve this by adding the following snippet to your code (ensure it only executes once as it appends a new event listener to the toast each time it is called):

toast.addEventListener('shown.bs.toast', () => { // This runs after the toast becomes visible to the user
  // Trigger the alert here
  alert("Your alert text");
})

update

It appears there is no way to remain on the page while preventing the default browser pop-up [2], which means the toast cannot fully animate before the pop-up appears.

I also explored the option of creating a custom pop-up after the toast display; however, determining the user's intended destination for navigation upon clicking 'confirm' proved challenging [3].

In light of these constraints, the only solution I can propose is to disable the toast animation entirely by adding the

data-bs-animation="false"

attribute to the toast's HTML [4]. This should allow the toast to be displayed before the pop-up triggers.

Is there a way to activate Toast notification before the window's onbeforeunload event?

Answer №1

Similar questions

Having difficulty in sending updated attribute data to MongoDB while trying to edit a User schema in the MERN stack

"IOS exclusive: Encounter INVALID_STATE_ERROR on IOS devices only, not on Android, OSX, or Windows platforms

After a duration of 4 minutes, an ERR_EMPTY_RESPONSE is thrown in response to the

Best Way to Eliminate "#" Symbol from URL Address in UI-Router

Streamline JSON arrays into separate variables based on their respective categories

Difficulties encountered when trying to load liquid using Javascript

Updating the textarea with Ajax without the need for a button click or refreshing the

Determine whether there are three or more identical values when comparing two objects in typescript

Testing JavaScript performance using the V8 engine

Is there a way for me to know when ng-options has completed updating the DOM?

Expanding the content width of Bootstrap Nav Pills

Utilizing the map function on an object that includes several arrays

Is it acceptable to use JavaScript files in the pages directory in NEXTJS13, or is it strongly advised to only use TypeScript files in the most recent version?

NG-model not visible to AngularJS Controller's filter

Navigate JSON Object - Prior Action

The MomentJS difference calculation is incorporating an additional hour

Can a gulpfile be written in ES6 syntax?

You cannot use a return string in an ajax call with onbeforeunload

Implementing efficient loading and dynamic updates in web applications with Angular.js and php through

Comparison: JavaScript Cookies vs PHP Cookies