73
Views
5
Comments
How to alert the user when he clicked on browser back button.
Question

How to show the conformation popup when the user clicks on browser back Button. If he clicks on leave button, it should navigate to the previous page & if he clicks on cancel button it should be in the existing page.


2023-12-14 09-56-57
Yogesh Javir

I think there is no such way to detect browser back button clicked.
Instead of this you may wrong your logic ondetroy action.
Also check if this can help you
How to Detect Browser Back Button event - Cross Browser

2024-05-14 06-52-28
Srigovindh-EONE

Hi HARI PRASAD BODDU ,

Confirmation message in JavaScript on the back button from the device

Please refer  to the forum discussion

I hope this might help you.

UserImage.jpg
HARI PRASAD BODDU

when the user clicks on browser back Button. I am showing a conformation box. In My Case Ok button is navigating to previous page and cancel button is also navigating to previous page. how to stop the cancel button navigating to previous page (When we click on cancel button it should stay in the same page).


2021-11-12 04-59-31
Manikandan Sambasivam
  1. Intercept the back button: Use the window.onpopstate event to detect when the user clicks the browser back button.
  2. Show a confirmation dialog: Display a confirmation dialog asking the user if they are sure they want to leave the page.
  3. Handle the user's response: If the user clicks "OK", allow the navigation. If the user clicks "Cancel", prevent the navigation by pushing the current state back to the history stack.

Add JavaScript to Your OutSystems Page

Follow these steps to add the JavaScript to your OutSystems page:

  1. Open your OutSystems application.
  2. Navigate to the page where you want to implement this functionality.
  3. Add a "JavaScript" widget to your page (you can find this in the "Interface" tab under "Scripts").

2. JavaScript Code

// Function to show confirmation dialog and handle navigation

function handleBackButtonEvent(e) {

    var confirmationMessage = 'Are you sure you want to leave this page?';

    if (!confirm(confirmationMessage)) {

        // User clicked "Cancel", push the current state to prevent navigation

        history.pushState(null, '', location.href);

    }

}

// Intercept back button using onpopstate event

window.onpopstate = function (e) {

    handleBackButtonEvent(e);

};

// Ensure the initial state is added to the history stack

history.pushState(null, '', location.href);



UserImage.jpg
HARI PRASAD BODDU

Not working for cancel button, it is going to previous page 


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.