1

I am working on a single page application using Oracle JET. In the page I'm building, I'm trying to alert the user when they try to leave the page without saving their changes. So when leaving the page I want to:

  • Intercept the routing.
  • Check if there are any changes.
  • Give a popup if there are changes.
  • Continue with routing if there aren't any unsaved changes.

I believe that this should be possible using the ojRouter (doc link here), but I have not gotten it to work. I have tried many approaches, but this is what I have ended up with so far:

EDIT: I have gotten a little further and managed to successfully access the canExit property, I edited my code block below. However, this still does not block routing.

oj.Router.sync().then(() => {
   const letrouterState = oj.Router.rootInstance;
   letrouterState.currentState().canExit = ableToExit();
});

function ableToExit() {
  let canExit;
  //function that will check if the page has unsaved changes
  if (ableToExit()) {
    canExit = false;
  } else {
    canExit = true;
  }
  return canExit;
}

I have also tried to use window.onhashchange. However, this only triggers an event when opening the page my page, not when leaving it.

I hope I made my problem clear and I am happy to clarify any of my request if needed. Would someone be able to help me? Thank you for your time in advance.

-Wouter

Wouter
  • 21
  • 1
  • 7
  • https://stackoverflow.com/questions/7080269/javascript-before-leaving-the-page – Dmitriy Godlevski Jul 01 '20 at 14:58
  • Hi Dmitry, Thank you for your reply. I have seen and tried the solution in that question. Unfortunately, this does not work for me since I am using a Single Page application. When I implement that code it does not trigger any events. – Wouter Jul 01 '20 at 15:44
  • 1
    Oh, I see.. Sorry, I am unfamiliar with oracle jet. – Dmitriy Godlevski Jul 02 '20 at 18:18
  • 1
    https://docs.oracle.com/cd/E86256_01/jet/reference-jet/oj.RouterState.html#canExit Looks like there is a callback method available in the option params of the RouterState class. If you set it up using the canExit options you can try getting current router state, see if it matches the route you need to "block". If it does then run some logic to determine whether or not the user can move on, execute your alert, return false. If they have filled out, you would just return true for that method. By default you would want it to return true so it doesn't mess with the other routes. – Budhead2004 Jul 06 '20 at 16:03
  • Hi BudHead, thanks a lot for your reply. This is indeed one of the things I tried, but it became very messy. Because of this, we have decided to adjust the requirements and not use this anymore. – Wouter Jul 20 '20 at 09:53

2 Answers2

1

The ModuleViewModel interface implements the optional canExit method, which gets invoked on the beforeStateChange event of ModuleRouterAdapter. Assuming you use ModuleRouterAdapter in conjunction with <oj-module>, this is relatively easy to implement, you simply need to return a Promise and then either resolve or reject that.

pentzzsolt
  • 1,001
  • 1
  • 9
  • 18
0

Because intervening with the entire router became a very messy solution, we have decided to adjust the requirements and not do this anymore. Thanks to anyone that tried to help. Moral of the story is not to try this :).

Wouter
  • 21
  • 1
  • 7