I have the following link
<a data-ui-sref-active="active" data-ui-sref="contact" href="javascript:void(0)">
Contact
</a>
It shows as active when I go to that page by clicking the link.
But the active class gets removed when I refresh the page.
How can I maintain the active page state when the user refreshes the browser?
Related
I have a rails7 app, migrated from rails 6, with multiple react components which load on the root route. which is defined here:
root 'pages#search_strings'
and when i run the project and browser to localhost:3000 the page loads perfectly, but I have a link on the page to home
<li class="nav-item"> <%= link_to "Home", 'root_path', class: "nav-link" %></li>
when i click this the page reloads, but the react component is not loaded, so its just a blank page.
changing this to '/' instead of root_path also does the same.
in /routes i can see the path is:
root_path GET / pages#search_strings
why does this only work when first loading/refreshing the page and not via links?
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
</li>
I wrote this ,when i click on the button
the url is updated but the page is not loading ,i have to refresh the page to load in to the page i desired
and also I am using react-router-dom#5.2.0 to use Switch .
I need to load the site to the path that i specified as i click the button
This link in the menu brings me to the dashboard. If I am on the dashboard and I click the link. The window scrolls to the section of the page I need it to go to. However, if I am on another page and I click this link it redirects but does not scroll to the specific section of the page. What can I do to get it to scroll when I am coming from another page other than the dashboard?
<li><a href ng-click="scrollToSection()" highlight=".content"><i class="fa fa-bell"></i>Click here</a></li>
$scope.scrollToSection = function(){
redirectServices.goToPage();
$window.scrollTo(0, 800);
}
I have a <div id="section1"> </div> at the bottom of my page.
And I have a button I want this functionality in button
$location.hash('section1');
$anchorScroll();
It is working as I want but it is giving me ugly url all this is in single page than why my url is updating?
my expecting Url is :
/Order/BuildOrder
when page load I get this but when I click button screen took me to my anchor div with id='section1'
but now url change to /Order/BuildOrder#!#section1
How can I remove #!# as this is scrolling on a single page. href location is not changing
I am using 3rd-party client side login then I have <ng-view> for every route so It means
all navigate will just reload within <ng-view>.
then I have a global footer which display user logged-in info on every partials
So I put it under <ng-view>. Will be something like this
<ng-view></ng-view>
<div ng-controller="FooterCtrl">User logged-in Info</div>
My problems
The FooterCtrl won't display logged-in user info after login because login only reload <ng-view> not full reload. (unless i refresh the page manually using F5).
My questions are,
how can I hide FooterCtrl when the user is not login
Where should I put the FooterCtrl?
In your FooterCtrl Controller, keep an eye over the route change.
Whenever the route changes, fetch the information on if the user is logged in or not.
Thus, your code will look somewhat like this - In your controller, have the following code:
$scope.$on('$routeChangeStart', function (next, current) {
//Get the current state of the user log in.
//Accordingly, set the variable
//If user is logged in
$scope.userIsLoggedIn = true;
//Else
$scope.userIsLoggedIn = false;
});
Thus, your scope is now aware if the user is logged in or not each time the route changes - which I assume is, if your application is correctly configured, each time a different template is loaded into ng-view.
Now, your view can be as simple as:
<div ng-view>
</div>
<div ng-controller="FooterCtrl">
<footer ng-show="userIsLoggedIn">
<!-- Info to show when user is logged in -->
</footer>
<footer ng-hide="userIsLoggedIn">
<!-- Info to show when user is NOT logged in -->
</footer>
</div>
Thus, your Footer displays data based on the log in state of the user. Each time the view template changes, the controller will determine the log in state and display the view accordingly.