Question

I need to make a web page with Wicket that lays out the following table:

+------------+---------+
|  Category  |  Value  |
+------------+---------+
|    CatA    |  ValA   |
+------------+---------+
|    CatB    |  ValB   |
+------------+---------+
|    CatC    |  ValC   |
+------------+---------+
|    CatD    |  ValD   |
+------------+---------+
|    CatE    |  ValE   |
+------------+---------+

Every item in that table except for the headers is supposed to be a drop-down menu. There are two problems. First, each value list depends on its category list. For the sake of an easy example, CatA might contain “sports,” “cars” and “animals” as the options. Then, if “sports” is selected, ValA gets populated with “baseball,” “football” and “basketball.” But if “cars” is selected, ValA would instead get populated with “Volvo,” “Saab” and “Mercedes.”

The other problem is that rows must not appear unless the rows above them are filled in. So, when the page loads, only CatA and ValA should be visible. After ValA is filled in, CatB and ValB become visible. If ValB is filled in, then CatC and ValC appear, &c.

My question is: can this be achieved in pure Wicket, preferably asynchronously? I’ve looked through the Wicket API, but I’m not too familiar with it, so I could easily have missed the class that does what I want. My first thought involved using DropDownChoice and its onSelectionChanged() method, but that doesn’t appear to be AJAXified.

If there’s absolutely no way that this is happening with just Wicket, I’d consider using JavaScript, but that’s really a last resort.

I don’t necessarily need any code — it might not even work, since this is really stripped-down from my actual project requirements — but I would appreciate being pointed at a useful API class or an existing implementation or the like.

Edit:
Okay, donroby’s answer worked great for the first part (making values depend on categories) but I’m still lost on the second part (hiding rows until all preceding rows are filled in). At first, I thought that could be accomplished by attaching LoadableDetachableModels, but I now realize that that’s not what those do. Is there a way to toggle whether a component is on the page at all?

Answer 1

Some of the example code at Wicket Ajax examples may be helpful, particularly the Drop Down Choice Example.

You can definitely do this sort of thing in Wicket by attaching Ajax behaviors and minimize the amount of JavaScript you have to write yourself in order to accomplish it.