I have a form, when my user tries to reload, I need to show the popup "If you reload the page you cannot use this form".
the page is reloaded using a button in browsers
How to prevent reload and show custom popup ?
The browsers are designed to ask for confirmation with the native popup https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
And this cannot be customized (which would require async handling)
If the latter was possible people would get stuck on porn pages and would never have the chance to leave them.
I have a simple react app, to get to this app, a user clicks an anchor tag from another page. This is . Let's say this page is http://localhost/index.html
It redirects fine to the react app. Let's say it's on http://localhost/react/simple_app. In this react app, I use React Router, which has a catch all if none of the route matches. It will simply render text "Page Not Found".
When I click back button to get to index.html, both Chrome and Firefox will reload simple_app, WITH the url set to http://localhost/index.html. Obviously this will make simple_app to render "Page Not Found", as the route http://localhost/index.html is not defined in its routes. Once that rendered, the browser will immediately renders the previous page. So on this action the user will see the correctly rendered previous page. Everything seems to be pretty minor so far, just a bit of a flicker when "Page Not Found" briefly rendered then it quickly re renders index.html.
What is not fine is, if I then press "Forward" page on the browser, it will NOT re-render simple_app again. It will simply shows "Page Not Found". My suspicion on this is because briefly it has rendered it prior to moving "backwards" (with the wrong URL), hence browser will load it from cache.
Tried on firefox and chrome, with reactjs. Although this behaviour can be replicated with any JS, but specifically problematic with react router.
Also tried, if I type in the url http://localhost/simple_app, if i click back, it won't do the funky reloading with the wrong URL.
Not sure if any good solution to prevent this from happening.
To help everyone who got here looking for an answer, after a bit of digging and a bit of luck, I found the issue rooted in a library (ruby gem) we used called turbolinks. https://github.com/turbolinks/turbolinks.
This gem, injects javascripts which intercepts various navigation API such as anchor tag and browser back and forward so that it can make as our native application behaves like a Single Page App (without reloads).
So if you encountered similar behaviour, you may not be using Ruby, but check if you are using library that behaves similar to Ruby's Turbolinks. Hope this helps.
After inspecting an element, I see this very often-
I then have to switch over to AngularJS tab in Google Chrome and then click the checkbox Enable as seen clearly in the attached image. I don't know why it keeps on switching off after sometime.
It does have a material impact atleast on the application I am working. The moment I switch over to AngularJS tab (so as to enable the very same checkbox aforementioned), the whole application gets refreshed (Ctrl+F5) automatically gets invoked.
It's a disaster for me as the application which I am developing has around 5 to 6 steps. And I do have to cry when I have to inspect an element on step6 and when sometimes there is: $scope is not defined. All the values gets lost since after automatical refresh, the application swill get navigated to step-1.
This happens with the browsers for all the fellow associates in the team. This just makes us nervous.
Kindly suggest.
In some browsers (ex ie7) where angular is not working I want to display a message telling the user to have his browser updated or use another one.
The way I am doing this is
<div ng-if="false">Browser not supported</div>
If the angular cannot render then the ng-if will not be processed so the div is displayed.
This is also causing a flicker when testing for pages with protractor because the protractor is going from page to page very fast.
My question is: Does anyone have a better solution of treating this kind of situation?
I have a simple link in an app that opens an absolute page and it's target is blank. When i click it the page does open up in a new window but my app goes blank. I'm trying to track down in angular what's happening. What's the best way to trace this through?
If you are using Google Chrome, one way to do this is to get AngularJS Batarang Developer tools extension.