select-your-own-seat

Expand History Expand History
Collapse History Collapse History

Manage filter query parameters with push state

This commit modifies the current page’s URL through the pushState and replaceState API.

When a filter is selected, modify the current URL’s searchParams, setting the ?maximum= query parameter when there is a filter, and removing it when the form is cleared.

This progressively enhances the page’s experience for those with JavaScript enabled. Without JavaScript enabled, clicking the <form> element’s <input type="submit"> element wrapped in a <noscript> element will be behave similarly.

Most importantly, when the user refreshes the page, the URL will preserve their filtering selections, and the page will render highlighting only the seats within the selected filter.


Within the context of the rest of this example application, this is a somewhat extreme and superfluous client-side enhancement. We’re hewing close to re-implementing server-side logic.

What’s worth highlighting is that we’re thinking in terms of URLs and page reloads, it just so happens that we have an opportunity to improve the performance and experience in a JavaScript-capable environment.