I want to pop a modal with "Cancel" and "Yes" buttons when a user attempts to leave the single-page app.
To provide some context, I am working on a single page app that appears on a larger site that is not part of the single page app (so, the header and footer is part of the larger site, and single-page-app is the content). When a user attempts to leave to another part of the site (by clicking somewhere in the nav for instance) that is not part of the single page app, I want a warning modal to display with a warning. A user can close or refresh the page as much as they want, and it shouldn't pop a modal. Same thing if a user hard-codes a url (say, google.com in the browser), the modal should not pop.
So far the other similar threads I found on stackoverflow either uses Prompt component, or window.onbeforeunload. Both of these have the issue of them popping a default text box with a warning, and not a custom modal, which is an important problem, but that isn't all of the issue.
Prompt, to my understanding triggers whenever a user redirects within the single page app, which is not the behavior that I want.
window.onbeforeunload, to my undertstanding triggers even when refresh or close, which is not the behavior I want.
Maybe this isn't such a common problem, since I can't seem to find an easy solution for this, but any and all ideas are greatly appreciated.
Related
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 am trying to implement a page where top part of page is static and bottom part keeps on changing. I was able to achieve this using react-native-modal. But the problem is the back arrow button which is always supposed to be on the top of page becomes inaccessible entire time. I want to access the button even when modal is active.
Any help will be really appreciated cause it's not available anywhere, I went through the entire react native and react-native-modal docs related to this
I have a question that suppose, I have an Admin Dashboard page, on which I have given a list of users. clicking upon a particular user the details of corresponding user is shown on a different page (say on userDetails.jsp). Now I have a back button on userDetails page, Clicking of which I need to redirect admin to the last visited page that is Admin Dashboard page, I have one solution that I can "Reload" the previos page on clicking back button, but then I feel that there is the overhead of calling a server side API, retrieving all the data, Again redraw the whole admin dashboard page even when there is no change made in the userDetails[because it is read only page, modification is not allowed there]. Is there anyway that I can make user of cache or anything else so that I will not need to go to the server to fetch all the data again. I am using spring MVC, angularjs, Thank you.
On your button's click event add the following code:
$window.history.back();
make sure to use $window rather than window since you're using AngularJS
I have a design where login screen looks completely different from the dashboard UI.
Once the user logs in he is shown a dashboard where he can control things.
Now,the login screen just occupies the whole view with a form box in centre.
once user logs in, then he is taken to the dashboard.
In our current approach we have kept login as a separate angular app and dashboard as separate as I am planning to use a view that changes except the sidebar and header as the ng-view for teh dashboard.
Currently the whole login screen is a separate app, which i feel is little weird when it comes to dealing with things, so is it possible to have an overlay which occupies the whole screen and goes away when the user logs in ?
Of course it is. There are a couple options here. Some folks simply force you to the /login route until a successful login has been completed, token stored, etc. The other option is that you use a full-sized, absolutely-positioned container, with highest z-index, and place it on your main index.html. Until something changes, that's all you'll see. Then, use ng-If to remove that container once login is complete and a property of the view-model has been updated, such as navModel.loginComplete=true;
I have read in requirements that when user presses the back button, application must exit.
(5.4.2): "Pressing the Back button from the first screen of an application must exit the application".
So, i have read in many sites that exitting in silverlight is not available, but i think that they mean, that application should only deactivate (for example, it is deactivated when we press button with "windows flag").
I have a main menu in my application. If i navigate on another pages and return to main menu, pressing "back button" doesn't deactivate application because previous pages are another pages in application. So, maybe I need to clean "navigation history" ? But it is not possible, i have readed it somewhere...
so, what to do in this case?
The back button must exit the application from the first screen in your application. Your application is supposed to navigate backwards through your page stack if the user has navigated forwards through your pages.
This requirement simply means that you application must not prevent the user from exiting the application when the press the back button and have reached the first page.
First off, there is no explicite exiting in Silverlight. There is no Exit() method.
Think of your app as a webapp and whole navigation system is like a simple browser with back, home and search button.
Can you close stackoverflow.com ? you can back to another site (if any) or press start/home button to leave stackoverflow (if it's not your home page :) )
In Windows Phone 7 the behaviour you describe as "deactivate" is called Tombstoning.
You can use Non-linear Navigation Service to solve your problem with navigation.