Allow natural back button behaviour with use case of dynamically-added query parameters - vue.js

I have the case that I push some parameters to the nuxt router (https://router.vuejs.org/guide/essentials/navigation.html) whenever somebody visits a page without any parameters.
Example:
somebody visits: /program it will end up in /program/first-event?year=2018&month=6
(First the view filters the program for current events (therefore the parameters for this year and this month) and then from the filtered events it will set the first event as active post (also by pushing it to the router).
This is all wanted and good. BUT now I detected the following problem:
Somebody is visiting /aboutus and then navigates to /program, the router will automatically change to /program/url-of-event-post?year=2018&month=6.
Assuming the user wants to go back to /aboutus he clicks on the browser back button. This will bring him back to: /program which automatically adds the post and the parameters again (effectively moving one step forward again).
Means the user is caught in clicking endlessly on the back button.
My approach would be to try to register if a user clicks on the back button and if so, I would not add the parameters. But I don't know how to do this.
I thought the router would provide some 'from' property, but so far I did not find anything.
I would be very happy to hear some thoughts on this. Thank you heaps in advance.

You need use router.replace.
https://router.vuejs.org/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort

Related

Aurelia: Show Dialog State In URL

I have a simple Aurelia application that displays accounts. The default view is a list of accounts. There's also an account details view.
I'd to make the details view open in a modal/dialog over the top of the list view. However, I want the presence of the modal to show up as part of the URL.
I found it easy to use the aurelia-dialog plugin to display the details view, but can't figure out how to get the dialog's presence to show up in the URL.
Another option might be to throw out aurelia-dialog and use a child router to display the details view, then figure out how to make that show and hide as a modal.
And, of course, another possibility is that there's a better way that I just don't see yet.
Has anybody seen or created something like this?
One possibility that occurs to me would be to add the dialog's presence as a parameter to the current route and then call it. You could use the route like /account?dialog=true. Run some tests to ensure that the ?dialog=true still routes to the same page. Then, use that route to check whether that parameter is set and display or hide the dialog window. When you refresh the page, the dialog window should still be open/closed. This also means that whenever you open or close the dialog window, you need to send a new route to the router (basically same route but different parameter).
This isn't a detailed solution but might get you on the right path.

pushState on existing url, on refresh cause double url in history

I've a problem. obviously.
First of all, sorry for my bad english. Then...
I'm using History.js for pushState and other function of History API in HTML5. But this is not the point.
example:
i've this url, generated with pushState, www.mysite.it/picture/2, that show a lightbox with the picture. When i load more images, with keypress or click, the pushState change the url to the next (or previous) url (ex. www.mysite.it/picture/3).
The problem is this: When i refresh the page, the site poin to the real page of www.mysite.it/picture/2, and it's ok, but, when i click on the BACK button i've in history the same url (www.mysite.it/picture/2) for the second time. I think that this happen because when i refresh i create e new history row.
...i dont know how to solve this problem. Please, help :)
Problem Solved
i've writing the pushState function outside of the if that determinate what key the user have pressed. So, when cntrl+r was pressed for refresh, another row was added to the history. xD

Javascript back on two consecutive pages

So, I ran into a problem: I have 2 (or more) consecutive pages, which the user can click through. At the bottom of each page there's a "Back" button (with Javascript's history.go(-1);), so that the user is able to go back to the previous view.
Now my problem is: When the user is on page 3 and clicks on the button, he goes back to page 2 (until here everything's fine), but when he's back on page 2 and clicks on the back button on that page, instead of going even further back to page 1, he gets sent back (or forward?) to page 3.
Is there a solution to this problem, I tried Google, but couldn't find anything.
Thanks in advance! :)
Your problem is that the Javascript is behaving exactly as it should in returning the browser to the previous page. Could you not handle your navigation between pages more explicitly? Replacing the history.go(-1) with a link to the actual script\page?
Use window.location to send the user back to previous page instead of history.go(-1). If the user lands on the second page in your flow, the back button will be useless.

Changing CSS variables based on JavaScript events

We have a Facebook app here which has three boxes with three buttons. Each button, when clicked, should change state once an event (successfully) happens. The buttons are almost all working (a few minor bugs) but they have been done a rather long-winded and inefficient way.
My question is, what is the most efficient way to link events (i.e. page 'liked', personal information submitted, page 'shared') with the state of the buttons?
You can use jQuery and the .trigger() function to fire off events. Then you can use .bind() to listen to the events and do something. For example, when the user logs in, you can trigger a user_logged_in_event, and bind to it. In the function, you can then use JS to change the login button to logout...

How can I clear the PropertyModel's value when I hit back on my browser

I have a DropDownChoice with a PropertyModel in my page and I have some other actions which take me to different pages. Now when I click on the Back Arrow on my browser, I come to my page which has the DropDownChoice with the previously selected choice. I understand PropertyModel holds the value for me. But how can I get rid of it when I hit Back button and why is the onBeforeRender(both on the class as well the Component) not working when I hit the Back button. Please comment if my explanation is not clear enough. I am using Wicket 1.4.8
onBeforeRender doesn't work because it's never called. When you navigating using "Back" button, no new request are sended to your server, hence page rendering never occurs. The only way to solve your problem - is to use javascript.