Recommended browser back button behaviour for SPA's - single-page-application

Our company is building an SPA and we're having a discussion about the best behavior for the browser back button. The SPA is a management tool with a lot of tables and filters. Every time a filter is changed the URL parameters are updated to reflect the current state.
There are two sides to the argument of what the back button should do:
One side thinks the back button should switch states. So every time a filter changes it should push the new state in the browser history.
The other side thinks the back button should switch pages. So filter changes should be ignored and the browser should return to the previous page/view.
Both options have their pro's and cons. Is there a common view on what the back button should do?

Related

FullCalendar: is there still a viewRender event hook?

I need something like the viewRender event in order to persist the user's state. I'm building a UI where users will frequently jump in and out of the calendar, so preserving their view/range is essential for a pleasant experience. Does this exist in v5? The last mention I can find of it is from v3.
The only workaround I can think of right now is a direct click handler on every view control element, or a very heavy-handed MutationObserver. This is a React app so either one is going to be super awkward.
Thank you!
Edit 2021-02-11:
I looked at the available view render hooks but none of them address my problem. What I need is an event that will fire whenever the view state changes, including clicking between weeks/months/etc., so that I can persist the date range the user most recently viewed as well as the view they had selected.
viewDidMount is the closest to what I need, but it does not fire when the date range changes.
Edit 2021-05-26:
Another problem with using viewDidMount is that using it to enact side-effects is a bit overeager. The hook gets called whether or not the user has actually done anything, and the default view always gets passed as view inside the View Object. So there's no way to tell whether this mount event contains data I should persist or not.

HTML Change button state permanenty

I am completely new to web development. The question I have is rather simple (I guess), but after multiple hours of using google and experimenting I am still without any solution. The problem I have is probably not how to do it, but which keywords to use while searching.
I want to create a simple website. (For testing I use Caddy Server). For my website I use a simple index.html file. On my website I want to have 9 buttons, which will be disabled once clicked. After refreshing the page, every client should also see the changes, so the button-state has to be stored somewhere on the server.
Then there will be another button, which sets the web page to its initial state (all buttons enabled). The purpose of this web page is that 2 persons can click buttons successivley until only one button is left enabled (the web page reloads itself every second on every client). This will be used to select a certain map from a map-pool of 9 maps.
My main problem is, to store the button states, so after refreshing the page the buttons should be still disabled if they were clicked. All clients should see the buttons as diabled once they refresh their pages. Do I have to implement a database for this or store the button states in xml or json? Do I need javascript, jquery, php or ajax for this? I do not want to make it very complicated, so if I need for example a database for this, I will probably just give up.
What I'm asking for: Any point in the right direction on how to implement a simple button that keeps its state after reloading the page would be much appreciated. I found a solution for this using JQuery, but it does not work for me (button does not preserve state after refreshing See here).
Thank you so much for any help!
Your server will need a data store (database) to save the values desired for each button.
Client Side
Set disabled attribute on all relevant buttons in your HTML. On (client-side) page load, fetch the value(s) from your server (database) and depending on what the returned value(s) are, .clearAttribute("disabled") on all buttons accordingly.
Server Side
Have your server set the disabled attribute on the HTML <button> elements based on values in your database prior to serving the HTML to your client(s).

Asp.net controls losses the value

I am using two tabs in my page like the attached image.
.
Here, after selecting the value in all dropdownlist controls then, i click the generate button. so, the tab is moved from parameter to report. Then again i click the parameter tab. At this time all my dropdown controls shows null value.
but I want all the dropdown values which i selected before.
how can i get the dropdown control values?
It's important to remember that web pages like this are stateless. One request won't remember anything about another request.
So in your situation, you're putting in data, then it sounds like you're clicking a link (or button) that redirects you to another page, then you try and go back to the first one, and it has to fire off yet another request, with no knowledge of the first one's state.
Given that, it seems like you have two primary options (and dozens of others that I won't bother mentioning):
Move the tabs to be on the same page. (My recommendation)
There are lots of controls out there, or you could easily write one yourself, that don't separate tab pages via multiple requests. If you did that, switching tabs wouldn't lose the data.
Add a "save" button, and disable the other tab.
This way, the user actively has to save the data before being able to leave the page via another tab. The biggest issue here comes in the form of usability.
Which one of those you choose is dependent on a number of factors, not the least of which being code maintainability and the size of requests.

Preserve selected option with back button, using jquery mobile & asp.net & ajax

I thought this would be a trivial feature, but I have lost a fair bit of hair trying to figure it out. I have a jquery mobile web page with a select menu. Users click an item in the drop down list, then later click on a link and navigate to another page. Users then click the back button. The desired result is that the selected item remains selected. Right now, the selection is lost, and it defaults to the first element in the list again.
Things I've tried:
1) Use an asp.net dropdownlist with autopostback. This preserves the selected option, but then I get a page flicker because the entire page is posted back.
2) Wrap above asp.net dropdownlist in an updatepanel. This preserves, doesn't flicker, but it wipes out the jquery mobile styling. Also tried some suggested workarounds with firing a jquery create event, but couldn't get anything working.
3) Write cookies on the select change event in javascript, and read them in the asp page_load event. However, page_load is not called when the back button is clicked, so this had no effect.
4) Tried creating a jquery ajax request to a web page method, but the method must be static and therefore I can't get it to modify the page.
Any other ideas? Is it just me or should this indeed be a problem that's been solved a million times?
As an FYI, I am a newbie at web programming, so please spell it out if you have an answer :) (come from a c++/database background).
Thanks!
Turns out even the date scroller could not survive a back button in some cases. For example if the user navigates to another site, and then uses the back button to come back to my jquery mobile site, all my javascript dom manipulations are lost. The solution is non-trivial. I store everything I need to maintain state of a page using html 5 local storage. On the jqm show page event, I detect if all my global variables have been wiped clean, and if so, reload state from local storage. Works perfectly, but it is quite an implementation task. And of course, if local storage is not supported by underlying browser, it all falls to pieces.

Read page from cache on Back but not when clicking a link to the page

I have a set of interlinked dynamic web pages.
When the user clicks from one page to another, I don't want any caching to happen - the request must go to the server, which will return an up-to-date page.
But when user clicks Back, I do want the cache to be used - some of the pages can take some time to generate, which is fine when you're clicking through to them, but not when you're clicking Back.
Is this possible?
(Please don't suggest re-engineering everything as a single page making AJAX queries!)
(Note: this question is the opposite of the ever-popular "How do I prevent caching when the user clicks Back?" question.)
A common trick for avoiding the browser cache when dealing with dynamic pages is to add a parameter to the link url that is unique (using the time, to the millisecond is common).
When the user hits the 'back' button, they will go back to the last rendered version, and should get it from the cache.

Resources