Populate dropdowns based on selection
I'd like to get people's thoughts on the best approach.
I'd like to have a search ability where once a selection if made, the next dropdown box populates with only the available options from the database. For example, if I have a product model with three fields 'Group', 'Sub-group' and 'id' and those fields are nested within each other so Group 1 has 10 types and those 10 types have a total of say 100 products. How can I do it so the user can drilldown to a specific product to search on by first selecting a group, and then one of the sub groups and then finally the product.
I think there would need to be some AJAX going on to populate the fields in the background or do I push all the data to the view with Javascript and make updates using JQuery on the DOM change events on the fields?
I'd like to get some thoughts on best ways to implement this type of thing before I go running off and doing it for 15+ models :)
Definitely want to do some AJAX for that. You can set up jQuery to listen to the first dropdown's change event. Then you can set up an endpoint like "/group/#{insert-dropdown-selected-value-here}/subgroups.json".
When the change fires, take the value, insert it into this url, and then request it via GET with jQuery's AJAX method. Then you can either have the subgroups.json return HTML for the options or a JSON array of subgroups. I would recommend the JSON array so it is more reusable in the future.
Lastly you would want your success callback for the AJAX request to transform the JSON array into <option> tags for the subgroup select and then you can replace the existing option tags with the new ones you just retrieved.
Does that make sense? You may be able to build a nice little controller concern for your different models or it might be easier to build a generic endpoint to hit so you only have to write this code once. Kinda depends on what data you want rendered in the JSON. If it's generic, then you can make your endpoint generic. If not, duplicating endpoints with a concern and then just modifying the JSON template might be the best solution.
Cool thanks Chris. That makes sense. Is this something that I should implement a JSON serializer for like resource json api? At the moment my app has no JSON api interface but from all the podcast listening I have been doing it should be something is should implement.
Love how I asked this question almost 10 years ago and I still don't have a nice way of doing this.
Believe me I have tried building features around this and it is simple when you are talking about a couple of fields... but as soon as you have 10+ fields across multiple objects and single/multi select it gets very tangled.
Yeah, that's probably a naturally complex situatino with that many objects.
These days, I'd probably use https://github.com/josefarias/hotwire_combobox and register callbacks so when one of the fields changes, you can hit the server to update the other fields as needed. Might have to be careful that doesn't trigger an infinite loop of updates though.