I want to jump to the previous page using iron router. Normally, I would have used the history.back() function but in this case, I use yield templates.
The page I am in is reached using myWebsite.com/page which redirect to myWebsite.com/page/sub-page in order to display the default yield content. Tell me if it is not clear enough, I can edit and provide the code.
To sum it up, my previous page is 2 pages behind. I tried history.back(2) or history.back(-2)but it does not change anything to the normal behavior of the function. How should I do?
I could point directly to the second page but if the user uses the myWebsite.com/page url to access it, my back button would not work.
EDIT: It appears that it was my condition for checking if the history was at least 2 pages which didn't work. Moreover, I should use history.go(-2) instead of history.back()
I will post a proper answer.
Here is the code:
var numberOfEntries = window.history.length;
//check if the history is big enough
if (numberOfEntries>2){
// if it is, jump two pages before
history.go(-2);
}else {
//if it is not, use the default path
Router.go("home");
}
Related
My goal is to create multi screens in one single page.Depending upon the action the user will be able to navigate from one screen to another screen.I have shared the images below
When the user clicks on any of the categories ,it will navigate to a second screen.
While clicking back it will again comeback to the first screen without change in URL.I have tried creating a full page modal and could not achieve this kind of functionality.I am not sure whether it should be done as a modal with multiple screens.
Please suggest me any method I can achieve this.
What you are likely referring to is creating an SPA or Single Page Application. This can be done through 'Vanilla' JavaScript at great effort or via one of many JavaScript Libraries or Frameworks.
Reactjs, Angular and Vuejs are probably the most common.
IF you were to use Reactjs then you could use what's called React Router. React Router would do what you want to do very easily. Doing it in Vanilla JavaScript would require a great deal of work or it would be very ugly.
However you did ask, so one way of doing would be to use JavaScript to load an iFrame or to make a top level parent element display: none and another to then display:...
Also if you are thinking of something less hacky, but not something as sophisticated as React or it's peers, then check this link out for a relevant article. Perhaps it's a path forward that you would prefer.
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
To help rookies like me, you can make a single page app or SPA, or a dynamic page that updates based on user actions with a single URL, in vanilla Javascript. You don't have to use a framework.
There are 3 concepts you need to understand:
The server doesn't see past the # in the URL
You need to tell your code what screen you want to display. Normally you would have URL.com/page-you-are-on and click a link to go to URL.com/page-you-want
However, in a single page app, you don't go to different URLs. So how does it work? You use a fragment identifier or a pound symbol. #
The # in the URL doesn't get recognized by the server. So URL.com/page#page1 and URL.com/page#page2 to the server is the exact same URL.com/page.
So you can use the URL to indicate to the server what page you want, in your single page app.
A Router can decide what to show based on the # URL fragment
So your page loads at URL.com/page#page-you-want. You need to inspect the URL and get the piece past the #. You inspect the URL, and split it on the #. That means you get page-you-want. Your code then uses that to decide what content to display. The function or file that does this is commonly called a router because it routes to the file or function you want displayed.
Once you know what to show, dynamically update the DOM
This is where the magic happens. Your website looks at the URL, gets everything past the #, sends it to function that decides what to display. You now need to display it.
The DOM has lots of functions and methods that help it update and create various things. It could be as simple as this:
function displayPageAbout() {
// the router calls this if the URL is URL.com/page#about
let pageSection = document.getElementById('pageSection') //this is where the page will be displayed
//create the div and give it content
let page = document.createElement('div');
page.textContent = 'This is the About Page'
//add the div to the spot on the page where the content should go
pageSection.appendChild(page);
}
That is basically it.
If found these two examples and tutorials useful in understanding what it is, and how it could work.
https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
Good luck!
I have 2 routes defined as homepage and page1. I am going to page1 from homepage by this.router.navigation(with some queryparams).Now once i go to page1, i have some filters,which i can add to get particular data from api.Once i add those filter i change the page1 url by this.router.navigation(with some queryparams).After adding/deleting multiple filter , my url changes many times..Now i have a back button which upon click should navigate me to Homepage.
1.I have tried using history.back/location.back.But i have to click multiple times.(i see that navigationstart gets called multiple times)
2.i have tried a solution using rxjs pairwise
But i am not able to get the previous page(homepage).
3.This is just a situation.Basically i have to get the route of the preious page.I can't hard code the path in backFunc,Because this has to be generic for all of my other similar types of pages.I can come to page1 from any other page, and should be able to go back to the respective page.
Am i missing something very obvious , does Angular 4 provides any way to tackle this?
I'm slightly confused by the question but it should be as simple as just navigating to the homepage by using router.navigate. Failing that, try using https://angular.io/api/common/Location service's back function.
router.navigate has extra parameters like "replaceUrl".
If you set it to true (when you change query params), the browser will consider you don't change page. So an history.back will works.
Have a look at https://angular.io/api/router/NavigationExtras.
this.router.navigate(['/page1'], {replaceUrl: true, queryParams:{...}});
I need create probably an uncommon thing, so I haven't found any guide, and thats why I would like to ask here:
I am creating an interface for a site, which is being created by ajax loading its parts.
My web interface can accept an URL parameter as an input. If there is the parameter, my site changes its behavior (loads the page + content by value of that parameter and show it at specified place).
But, at some point, I have to get rid of the parameter.
Especially, if someone reloads the page, I want to show the cleanly loaded web page, not the content - but the parameter is still there whie pressing F5
So, my code - which is not working, looks simply like that:
//EDIT: Thanks to #charlietfl. I have here an unload event, which figures in ways like "I want to go to another page by url adress bar"
Same problem, jsut need to change it just and only to RELOAD page event.
//we are here: http://example.com/?docId=1
$(window).bind('beforeunload',function(){
//window.location.replace("http://example.com");
window.location.href = "http://example.com";
});
Know two things:
1) $(window).bind works well, with simple alert in it.
2) window.location.replace("http://example.com"); works well too, if fired at some other event, like key press (for my testing)
What I am trying to achieve, is to "skip" the reload by redirecting.
Aaaand one more thing. I know about HTML5 syntax changing the url without reloading the page (change->reload->done), but I can't use it, because of compatibility needed with older browsers.
Well, plase, any tips? Thanks in advance :)
I need to keep controllers' state in angular ,for improving some user experiences, during user is visiting different pages.
For instance I have a list, which is created via a directive, and it has a pagination section, so imagine when a user go to page 20 and choose an item, they'll be redirected to the detail page, but when they click back button and return to the previous page they see the first page of the list which is not convenient and they expect to be on page 20 again.
I've come up with several options:
Using a dialog to display second page (item detail), so they can close that modal and return to the previous form without any change.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
Keeping some crucial variable globally to store controller state and using them when user comes back.
But I think there should be better ideas like keeping controllers' state during redirection.
Any idea would be appreciated.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
I prefer this because you get the added benefit of staying on page 20 when you do a page refresh. Options 1 and 3 do not give you this added benefit. Path params are also bookmark friendly.
Another alternative for you to look into that is almost as good is localstorage
or cookies. I dont think these options are better than your 2 though.
I'm using the Polymer core-animated-pages to switch between my websites main pages.
I select which page needs to be shown by the id of that <section>. You can see a sample in action here. Now, the issue I'm having is that at loading of the page, the page that should be selected gets loaded from the url, eg www.example.com/home shows the home page, www.example.com/activities shows the activities page (code left out of example since not really relevant).
But what should I do when the id provided in the link doesn't exist? Is there an option to show a default core-animated-pages-page with a 404 message? Or do I have to check every link if it's in an array of all my pages, if so load the error page manually and else show the correct page?
Again, here's the example: jsbin.
Edit: To show the way my page handles linking, here's an update example: jsbin. Linking is essentially www.example.com/#home, etcetera
Something I'm missing from reviewing your example is how you're handling routing. In a typical site, if a user navigates to example.com/foo or example.com/#foo my expectation would be (using your current setup) that that would take you to the corresponding core-animated-pages page with the ID foo or a section which corresponds to that route.
Using routing (maybe the Polymer flatiron-director element), a basic solution might query the DOM in your element to see if a section of ID notsupportedURL can be found. If not, default to taking the user to your core-animated-pages 404 page, which doesn't have to be any more complex than what you have in place now.
There are a couple of things you could do here.
In the simplest case, you could just validate the value in the pageChanged handler. If the page doesn't exist, update it:
pageChanged: function(){
var foundPage = this.$.pages.querySelector('#' + this.page);
if (! foundPage) {
this.page = 'error'
}
...
See: http://jsbin.com/xequvone/14/edit
If you don't bind the core-menu directly to the core-animated-pages, you can add whatever logic you want. The following version does exactly the same thing as the previous one, but uses a separate variable for the selected page:
http://jsbin.com/xequvone/12/edit
I think you'd want a router if your URL scheme was more complex. For example, if the hash includes multiple levels and parameters, such as #people, #/people/search or #/people/edit/12343.