I understand how to populate a sub menu (select) based on the selection of the first menu, however I do not understand how to do progressive enhancement with this.
If Javascript is disabled, how would this work?
I use JSON to populate the second menu based on the selection of the first, but if JavaScript is disabled, does this disable JSON and if it does how do I populate the sub menu from the database?
JSON is just a data format; but if you’re using JS to request it and populate the fields, then no this will not work.
You’d have to do this on the backend then. Provided the first select is served statically, a possible fallback would be to check on the backend whether JS was disabled or not (e.g. by setting a flag in a hidden input field with JS). If not, proceed as usual; otherwise direct to the next statically served step.
Despite arguments that coding for no JavaScript is unnecessary these days, I much prefer to add the JavaScript after to make the UX better.
For example, I have a form that submits “country” to a “state” page, that page submits to a “city” page. Once I get all that working I add preventDefault XHR JavaScript to save on the page reloads. More work up front, but I rest easier knowing there is less chance of someone getting a broken page.
But most probably less work in the long run, as building in this way will make your app 100 times more robust and once the app grows and becomes a monster you’ll be thanking yourself for it every single day
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.