In ExtJs, what is the best way to handle Browser refresh?
Say, I've a page with two tabs A and B
and the token when tab A is active is #mytoken/:someidforA
and the token when tab B is actibe is #mytoken/:someidforB
How do we ensure that the page stays in the same tab when we refresh the browser?
I'm doing something like this using Router in ExtJs5
window.onbeforeunload = function() {
token = // get history token
MyApp.getController('Main').redirectTo(token);
}
and inside the ViewControllers -
routes: {
"#mytoken/:someidforA" : "loadA",
"#mytoken/:someidforB" : "loadB"
}
Is this a good way to do it?
I would personally use the documented routes
Example:
Ext.define('MyApp.view.main.MainController', {
extend : 'Ext.app.ViewController',
routes : {
'user/:id' : 'onUser'
},
onUser : function(id) {
//...
}
});
You can also define the default route with the defaultToken property:
defaultToken : 'home'
It seems like you are already using some of these features. If the URL is something like example.com/#user/4 then on page refresh the application can handle this route as it previously did and show the same page/section.
To restore all the tabs that were open before refresh you'd probably have to look at using something like localstorage to keep state across page refreshes
Related
I am creating a react/Gatsby website and am trying to get the navigation working an need some guidance
So basically I have a site on a domain like: https//mysite.com
When navigating in the site my route gets added to the domain, like so: https//mysite.com/page1,
https//mysite.com/page2 etc.
When I refresh the browser I want the site to reload the website to its origional state, ie, https//mysite.com.
When I do reload from /page2, for example, the site seems to remember the last position. So on a reload I still have https//mysite.com/page2 in the address bar, whereas I want the site to go to the home page.
Is this possible?
Thanks
See this question for how to detect a page reload (such as pressing F5). The second most upvoted answer recommends this code for detecting the refresh and triggering another function:
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
}
Gatsby uses #reach/router under the hood. So use Gatsby Link to redirect to your root page:
import { navigate } from "gatsby"
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
navigate("/"); // redirect to your root page here
}
The user will be able to go back to the previous page. If you don't want this you replace the history like this:
navigate("/", { replace: true });
I'm using Datatables with AngularJS and the FixedHeader plugin which works fine when the table is displayed on the page. My issue is that when I navigate to a different page (single page application) using angular UI router, the FixedHeader header still shows.
Does anybody know why this is the case?
It looks like that is an issue with the FixedHeader plugin to DataTables.
There is an angular-DataTables module at https://l-lin.github.io/angular-datatables/#/welcome, which has a page about the plugins that work with it. This page lists the FixedHeader plugin and mentions the same issue you are seeing.
See https://l-lin.github.io/angular-datatables/#/withFixedHeader.
This page says the following:
Beware when using routers. It seems that the header and footer stay in
your DOM even when you change your application state. So you will need
to tweak your code to remove them when exiting the state.
It also shows a workaround for angular-ui-router:
$stateProvider.state("contacts", {
templateUrl: 'somewhereInDaSpace',
controller: function($scope, title){
// Do your stuff
},
onEnter: function(title){
// Do your stuff
},
onExit: function(){
// Remove the DataTables FixedHeader plugin's headers and footers
var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
angular.element(fixedHeaderEle).remove();
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
angular.element(fixedFooterEle).remove();
}
});
.when('/index', {
templateUrl: function ($params) {
return '/' + $params['language'] + '/template/home';
},
controller: 'homepagecontroller'
}
})
My web application home page url is index, on page load calling the template(index) and loading the content.
My requirement is on page(home page - index[url]) load index page content will be loaded but as per the router again calling the template call and loading the content, but the same behavior has to happen only on page url change not in page load of home page.
Thanks in advance.
I am assuming this is your problem:
You have a common layout/template for multiple pages and loading each page content using angular / AJAX. You don't want to execute this angular / AJAX loading when customer hits URL first time.
Here is the solution:
Load index / home page content using server side script at very first time and store a flag in JavaScript session storage / cookie.
Add an if condition in your route definition something like this:
.when('/index', {
// Get saved data from sessionStorage
var pageAlreadyLoaded = sessionStorage.getItem('pageAlreadyLoaded');
if (pageAlreadyLoaded) {
templateUrl: function ($params) {
return '/' + $params['language'] + '/template/home';
},
controller: 'homepagecontroller'
} else {
// Do Nothing
}
})
You can store a variable in session like this: sessionStorage.setItem("pageAlreadyLoaded", 1);
Hope this helps.
:)
I'm trying to reload browser (with location.reload();) if user click in <Link> for the the same path, where it already.
Example:
I have a menu:
- Home
- Contact
- About
When user click in 'Contact', he go to '/contact'. But I he already in '/contact' and click in 'Contact' in menu, the page reload.
It's possible to do this?
What I'm trying:
<Link onClick={this.handleClick} to="contact">Contact</link>
handleClick(){
var currentRoute = 'React-Route path';
var linkRoute = 'link path';
if (currentRoute === linkRoute)
location.reload();
} else {
//do default transition
}
}
But I don't figure what I need to declare in 'currentRoute' and 'linkRoute'. :(
You shouldn't reload the page. Thats a really bad idea. Instead disable the link like this:
if you are on the home page your links would look like this
home
contact
about
Then in your handleClick() function you can just do this.
handleClick(e){
e.preventDefault();
var disabled = $(e.currentTarget).data('disabled');
if (!disabled){
//do redirect
}
}
Basically have a data attribute on the link that specifies if it is disabled or not (only disabled if its on the current page) and then only redirect if its on a different page
Reloading the page on the exact same page will cause you to lose all state and process that the user has done, which doesn't need to happen. It also reduces traffic on your server for a new page load (aka any data you need to load on the page load you don't have to do again).
You can use window.location.href to get the current URL. Then you can do your comparison.
Hello here is my scenario.
I have these routes
routes: {
"": "show_group_list",
"!/group/:_id/": "show_group",
},
and here is my navigate function:
App.app.navigate('!/group/'+group.get('_id')+'/', { trigger: true });
when the function is triggered, on the address bar it shows localhost/group/1 instead of localhost/#!/group/1. The problem is that when I refresh the page I don't get the initial page anymore (mine is a single page app)
How can I hack navigate() so that it keeps the hashtag?
Ok, This was easy, I had pushState enabled. Disable pushState and you'll have back the hash