I have a backbone.js application, and I'm running into a situation where I need to reload a url. In other words, the user is on a current url, and I need to reload the page. To do so, I'm using the solution from this post: Backbone: Refresh the same route path for twice. So if my route looks like this:
"patrons/new(/)":"newPatron",
then I reload the page by calling
router.newPatron();
This all works great. The problem is when I hit the back button. The url will change and go back through the history, but the view doesn't change. On each back button click, the correct render methods are getting called.
So the url and render methods are corresponding to the backbutton changes, but the view is not changing correctly. It is reloading each time I press the back button though?
Anyone know how to fix this?
Related
When I am navigating to component then I am using this code
this.router.navigate(['', ROUTE_CONSTANTS.CONTRACT, ROUTE_CONSTANTS.CONTRACT_EDIT, {selectedContract: btoa(JSON.stringify(selectedContract))}]);
this brings to edit page now there is cancel button on edit page and that should bring to previous page
this.router.navigate(['/', ROUTE_CONSTANTS.CONTRACT],{
queryParamsHandling: 'merge'
});
everything works well, but while navigating from cancel button in browser url previous url path with all parameters are still there like this :
http://localhost:4200/contract/edit;selectedContract=eyJuYW1lIjoiMTBmZWIxIiwidmVyc2lvbiI6InYxIiwiZW52aXJvbm1lbnROYW1lIjoiaW50ZWciLCJlbnZpcm9ubWVudElkIjoiZjBmOGNiYTAtY2U0MS00ODQ5LWFjZjEtMjkxODRlMmE2N2M1IiwiZW52aXJvbm1lbnRUeXBlIjoiTm9uLVByb2R1Y3Rpb24iLCJleHRlcm5hbElkIjoiMWJiNDgyNTQtODJiMS00ZWFlLWFlMjAtOTE0NTAxOTNlYzdkIiwiZGVzY3JpcHRpb24iOiJ0ZXN0MSAxMGZlYjEiLCJhc3NldFR5cGVJZHMiOlsiY29yZS5iYXNpY2FyZWEiLCJjb3JlLmJhc2ljc2l0ZSJdLCJtb2RpZmllZE9uIjoiMjAyMi0wOC0wMSAwNjozMjoxMi4zMiIsImluZGV4IjoxLCJzdGF0dXMiOjEsInN0YXR1c1RleHQiOiJPREFUQV9DT05UUkFDVC5TVEFUVVMuT
I want to remove
/edit;selectedContract=eyJuYW1lIjoiMTBmZWIxIiwidmVyc2lvbiI6InYxIiwiZW52aXJvbm1lbnROYW1lIjoiaW50ZWciLCJlbnZpcm9ubWVudElkIjoiZjBmOGNiYTAtY2U0MS00ODQ5LWFjZjEtMjkxODRlMmE2N2M1IiwiZW52aXJvbm1lbnRUeXBlIjoiTm9uLVByb2R1Y3Rpb24iLCJleHRlcm5hbElkIjoiMWJiNDgyNTQtODJiMS00ZWFlLWFlMjAtOTE0NTAxOTNlYzdkIiwiZGVzY3JpcHRpb24iOiJ0ZXN0MSAxMGZlYjEiLCJhc3NldFR5cGVJZHMiOlsiY29yZS5iYXNpY2FyZWEiLCJjb3JlLmJhc2ljc2l0ZSJdLCJtb2RpZmllZE9uIjoiMjAyMi0wOC0wMSAwNjozMjoxMi4zMiIsImluZGV4IjoxLCJzdGF0dXMiOjEsInN0YXR1c1RleHQiOiJPREFUQV9DT05UUkFDVC5TVEFUVVMuT
while coming back on contract route
I tried approaches based on this link : How to update previous page URL in Angular
But still I am not able to do so
I have component-A(Details item page) and Component-B(selectable list page), the scenario is like when I goto component-A(Details page) and here I need to add some labels so, I goto component-B and select labels and go back to a detail page with selected labels it works fine if I go to A -> B component and B -> A component using web button. But when I navigate component-B again with the browser forward button and then select labels and go back but in this case, when I go back to component-A(Detail) at that time it reloads the component so, whatever data I have taken from component-B which is lost so, it won't reflect on component-A. this thing only happens with the browser back and forward button. in the normal web button navigation works fine.
When I goto component A -> B it will change my route. I have used routerReuseStrategy but somehow due to some blocker, I'm not able to manage my data with that.
I need to stop reloading my detail component.
Version
Angular - 7.2
Ionic - 4.12
Any ideas on how to fix this?
In my application, I have a multi-page form that lives on the URL http://localhost:3000/form. When I change pages in the form, the URL remains the same, but the state changes to render different views (pages of the form).
A new feature I want to implement is to allow the browser back button to switch views/pages (aka change state) in the multi-page form.
Is this possible? How can I achieve this?
Why exactly do you want to keep the same route? If a user wants to get back to the same state they were at via a deep link they would not be able to with this implementation would they?
If you want to use the same route you can at least use # routes to keep track of where in the form the user is.
Eg.
http://localhost:3000/form#step1,
http://localhost:3000/form#step2
then the back button would work to move them back a step.
I am working on a website, where url parameter gets updated based on user action, according to which I update the webpage without refreshing.
Consider the scenario of E-commerce where url changes when user clicks on filters and then updated products gets displayed.
Now the problem is, when user clicks on Browsers's back button the browser goes back to previous url-parameter, but page did not gets changed. I want to change the page also based on url parameter that gets changed after back button clicked.
I have tried this solution:
$($window).on('popstate', function (e) {
// Update the page also
});
The problem with this code is, this gets fired as url changes, means it does not care about if browser back button is clicked, or url is changing using the jQuery. So if I am changing url based on user interaction, the popstate callback will be called and my custom function also. To update the page I am using https requests, so http api gets called two times.
Is there any way to check if only "Back button" is clicked?
I would recommend you to change your design a litle bit and trigger all content updates (the product list in your case) by listening to url changes, not only url changes caused by the back button. So instead of triggering any re-rendering on click events, let these buttons be regular link to the url that represent your content and trigger the functionality from the popstate event.
This is how all MVVM-frameworks like Angular.js, Backbone etc are designed and meant to be used.
By doing this it will also be so much easier for you to maintain the application in the long run.
Good luck!
You can do this with sessionStorage! Below is the relevant part of an answer I always refer to for stuff like this https://stackoverflow.com/a/45408832
sessionStorage is a storage type like localStorage but it only saves your data for the current tab.
Session storage can be used like this.
sessionStorage.setItem('key', 'value'); //saves the value
sessionStorage.getItem('key'); //gets the saved value
performance.navigation.type is the browser is the variable that hold users navigation info.
if(performance.navigation.type == 2){
//User is coming with back button
}
So to put it all together, you can set/update a sessionStorage item as part of the callback of the click event for your filter, then performance.navigation.type to check if they used the back button to load the page and apply the data!
Sorry, I couldn't think of a good title.
I would like to have the default pushstate behaviour, but have custom behaviour during certain situations.
So I want all links to be normal /login, /register, etc. If the user is on the homepage, I want those links to go to their respective pages through backbone.
However, if the user is one a special page like /product/123, then we are going to show them a modal, and although the href says "/login" I want to simply call the route function to show the login page, append #login to the url (ie "/product/123#login") and add a push state with the hash-tag'd url.
The reasoning behind this, is that someone could be on /product/123, click /login, suddenly decide they want to share the product and have the product url available, then out of habit hit back, to go back to viewing the product [ie. close the login modal], and have it work as expected.
Is the above possible? From what i've been reading, backbone's history module is a set it and forget it kind of thing, and I was unable to see a way through the Backbone documentation.
It's probably not a good idea to have your modal in a route. For most use, a modal window is something that popups on the current page, it's not an actual view change, it's a view that is appended somewhere on top of whatever the user was doing (it's modal in the sense that the user can't continue what he was doing until he handles whatever popped up).
In that regards, the /login route should probably not be a modal but instead a full page view with a login form. Then on your other pages, I assume you have a Layout view that contains a sub-view somewhere that renders the "login modal" button, right? When click on this button, you can handle the modal rendering/appending to body (or however).
In this scenario, there is no need for a URL change, and so, Backbone router won't be involved. My point is that the use case you are describing would only make sense if it was interesting to share a URL (/product/123#login) that would re-open the login modal on the product/123 page (and not on another product)... and I think that's not a very useful feature! In my opinion (and this is very arguable, I am sure), the login modal isn't something that should have a specific route, because it's not an actual stable application path, if that makes sense.