I'm developing a SPA with NextJS, and it's made out of exclusively one page. There's not next/link or Router usage whatsoever. The user would visit the page and everything would happen within the DOM, including all button click, view navigations, etc.
The problem that I'm facing right now, is that if the user at any point clicks the back button.. well, they'll leave the site.
I'd love to hear any suggestions that anyone has regarding this.
The beforeunload can help you.
Example:
window.onbeforeunload = function(){
return ''
}
Related
I have a React website here: www.assertivesolutions.ca.
If you visit the site in Chrome and scroll down to the "What We Do" section and click on the "Our Services" button, you get taken to the Our Services page. Notice is starts further down on the page and scrolls up to the top. This is because, as an SPA, it doesn't really go to a different page; it stays on the same page and just changes the content. So if you're scrolled half way down the page before you click the button, it will still be half way down the page after you click the button. So I implemented a fix to scroll to the top in the componentDidMount() hook:
componentDidMount() {
window.scrollTo(0, 0);
}
However, if you try the same thing in Firefox, it does not work. It stays scrolled half way down the page.
So I can take two approaches to solving this:
Figure out how to get scrolling to work in Firefox.
Figure out a different way of making sure the Services page loads at the top other than using window.scrollTo(0,0).
I'm leaning towards 2) because I have to imagine there must be a way in SPA websites to accomplish what I want.
Does anyone know how I can accomplish either 1) or 2) (preferably 2).
I have implemented a login page in React and Material UI. When using in mobile, on certain phones the page refreshes automatically as soon as focus from one textfield goes away, and in another scenario, as soon as the keyboard pops up it refreshes. Anyone who has faced a similar issue, or any clue why this could be happening.
I tried calling the preventDefault method for onBlur event, but no change. Couldn't think of anything else, since observed the issue on some devices and not on others
I am building a Cordova app using angularJS and some of the screens in the app have login forms. Whenever I navigate to those screens from any other page,the keyboard automatically pops up. I have tried everything but nothing solves it. Right now I have temporarily disabled the form fields by making them read-only.
Please can anyone provide a fix for it? Any help is appreciated. Thanks!
When navigating around the developer's guide for AngularJS, I noticed that I do not go back to my last scroll position when navigating back to a page using the back button. Instead, I go right back to the top. Since the developer's guide is built with AngularJS, I am afraid that, when I build my own web application with AngularJS, it will annoy my users if they have this same experience. Why is this happening, and how can it be fixed? Do I need to use HTML5's history API somehow?
Go to the developer's guide and see this behavior yourself: http://docs.angularjs.org/guide/directive
If you want to fix it, I can think of an idea of keeping the track of every route scroll position in a map (in service or on a rootScope) - when you are leaving the page ($routeChangeStart listener) just save the scroll position together with route path.
And when coming to any page, you can check if a record in a map exists for the route path and scroll window to desired position on $routeChangeSuccess event
You should look into the Angular $anchorScroll service.
http://docs.angularjs.org/api/ng.$anchorScroll
It is for exactly your scenario!
The sample code pretty much speaks for itself.
Background:
I am using backbone.js & Twitter Bootstrap in my client-end page.
On clicking the logout button on header, a confirmation dialog should open.
The question is that
should I use router such as /logout to change to logoutView ?
If click No in the dialog, how could I show the main content with data before the dialog is opened.
Thanks!
Yes, you can use a router and you should.
First thing to know, is you have to render application's layout before dispatching any route, because the layout is rendered and needed for every action, so it's independant, right ?
Second you create a "logout" route in your router and give it the "#logout" hash, then in your "logout" action you open the modal.
Don't use router for such thing. Just fire the modal directly because:
On changing the router, you are gonna push that to the History. Hitting the browser's back button shouldn't really open a modal window.
URLs should be crafted in a way to be bookmarked. You don't want a URL that would open a popup or a modal window!
It's much simpler just to start the modal than to create a variable to hold the previous view and to fall back to it when clicking No
I have build client-side apps using different MVC frameworks like AngularJS and Backbone.js. Every time I faced the same situation you are talking about and found that the easiest and most accurate way is to just show the modal.
UPDATE
Please watch this. This is Jeremy Ashkenas the author of backbone.js stating exactly your situation about how should URLs be used and weather if they should be used to open a pop up or not.