With Ember I have a login page that I do not want to display the header/sidebar navigation for my site. Once isAuthenticated then I want them to show. I can get this to work by checking for session.isAuthenticated in application.hbs. If true I show the header and sidebar if not I do not display them.
This all works but once I login and transition to the default authenticated route the javascript for the sidebar dropdown does not work. When I click the links nothing happens. If I then transition to a different route they work. I'm guessing it's since I am not generating them when I first load the page because I am not authenticated.
Is there a better way to handle this or force a reload of the javascript?
EDIT: Here is a gist of the application.hbs and sidebar.js files:
Gist Files
Installed ember-metismenu and the issue went away.
Related
I am building a site using Next.JS and tailwind.
On the homepage, the content in the wrapping divs in the project section displays in the centre.
However, when I navigate to my about page using the navbar link, and then return to the homepage, the content in the divs no longer displays in the centre (it displays to the left). This issue is not solved unless I refresh the page.
Any ideas how I can solve this issue please?
Thanks very much
When changing routes to your about page and back, the class of the child element under projects changes from col-span-3 content-center place-items-center md:mx-40 to ProjectSection_proj1Left__CTWEv. I guess that is why it breaks. So check if you set this somewhere (maybe even by accident).
I'm facing a weird bug while using an iframe in one route in my company react app.
I have route for "/home" and "/maintenance", "/maintenance" uses iframe. When I am in "/maintenance" route and click browser back button to take me to home page, it shows homepage overlapping maintenance page.
I tried using key attribute in iframe it didn't work. Please let me know if anyone have found solution for this.
I'm working with React Admin, I have and EditView, when I redirect the user from the table to the EditView, it works perfect, BUT, when I push f5 and recharge the site, the same view shows a white page:
I think this has to be with the Resource definition, I have define this:
<Resource name="books" list={BooksList} edit={BooksEdit} />
The fetch to the api works fine, for that reason I think that the problem is something that I dont understand on the Edit, Show config.
I dont have Show view, because when I click on the table, I want the edit view without more clicks.
It is because when you refresh the page, the components return to their first state. The state that you're creating is not being saved anywhere, so when you hit F5 the state "goes back to the beginning".
I use Angular 2 (v2.4.4) and by using routerLink I navigate between the components.
This works fine, but if I load the very save component with the very same snapshot parameter (active.snapshot.params) the page won't get loaded again. So, for example if I am on /page/56 and I click on a link here which points to /page/56, the very same link (from a menu or something), the component won't reload. (And things might change in the database since the last load, so the page needs to be reloaded.)
I bypassed it by pointing to /jump/page/56 and the Page 404 controller redirects to /page/56.
This also works fine, but if I navigate back in the browser from /page/56, it will get to /jump/page/56 which directs to /page/56 by the Page 404 controller. So basically I cannot navigate back.
As much as I know, I cannot delete browser history by the HTML5 history API, but how could I go back to the page, which was right before /page/56, just by simply clicking on the back button of the browser?
The solution might be a simple JavaScript trick independent from Angular 2, as it does not actually load a new page just loads a different component and changes the URL. (Also because of this I should not use location.reload() because it will reload Angular 2 and all the depending JS, etc.)
Thank you for your solutions in advance!
you can use skipLocationChange Like :
this.router.navigate(['/jump/page/12'],{skipLocationChange:true});
Seems the only way is to create your own dicrective inherited from [routerLink] to control click handler or just add click handler to current element with managing refresh by yourself.
<a (click)="navigate(['/jump/page/56'])">Navigate</a>
where
navigate(route) {
this.router.navigate(route, {replaceUrl: true});
}
I'm trying to implement a SPA with AngularJS. I have a main page layout where the left side deals with navigation links and the top right corner contains username and user preference options as well and of course most of the page deals with the content of each navigation path.
What I'm trying to do is if the user is not logged in, redirect him to a login page that has a completely different layout (the login form centered and that's all).
How can this be done in a simple manner?
I am also in the process of implementing this feature. I will be treating login and the authenticated application as two different SPAs. So there will be 2 different server routes one for the login and one for the application.
This will allow me to not have my ng-view on the body tag so I don't need to have my header and sidebar logic replicated on every route.
You can use ng-view on the body tag so you can change the whole layout
<body ng-view>
</body>