I have a ListView starting with one item being displayed, where I append every new item with an AjaxSubmitLink, which works fine. Inside the ListView I have two DropDownChoices, the first triggering the choices of the second via AjaxFormComponentUpdatingBehavior. This works too, but only if I add another item to the default item. If the AjaxSubmitLink isn't clicked, the second DropDownChoice isn't updated, and in the Ajax debug window there is a blank instead of the id of the first DropDownChoice.
Here's my code:
final MarkupContainer devicescontainer = new WebMarkupContainer("devicesContainer");
devicescontainer.setOutputMarkupId(true);
add(devicescontainer);
final ListView devicesListView = new ListView<Device>("devices", devices) {
@Override
protected void populateItem(ListItem<Device> item) {
item.setModel(new CompoundPropertyModel<Device>(item.getModel()));
final List<Device.DeviceCategory> cats = Arrays.asList(Device.DeviceCategory.values());
final DropDownChoice<Device.DeviceCategory> categoryDropDownChoice = new DropDownChoice<Device.DeviceCategory>("deviceCategory", cats);
final DropDownChoice<Device.DeviceSubcategory> subcategoryDropDownChoice = new DropDownChoice<>("deviceSubcategory");
categoryDropDownChoice.setOutputMarkupId(true);
subcategoryDropDownChoice.setOutputMarkupId(true);
categoryDropDownChoice.add(new AjaxFormComponentUpdatingBehavior("change") {
@Override
protected void onUpdate(AjaxRequestTarget target) {
List<Device.DeviceSubcategory> subcats = Device.getPotentialSubcategories(categoryDropDownChoice.getModelObject());
subcategoryDropDownChoice.setChoices(subcats);
target.add(subcategoryDropDownChoice);
}});
item.add(categoryDropDownChoice);
item.add(subcategoryDropDownChoice);
}
}.setReuseItems(true);
devicescontainer.add(devicesListView);
AjaxSubmitLink addDeviceLink = new AjaxSubmitLink("addDevice") {
@Override
public void onSubmit(AjaxRequestTarget target, Form form) {
devicesListView.getModelObject().add(new Device(newId));
if (target != null){
target.add(devicescontainer);
}
}
};
addDeviceLink.setDefaultFormProcessing(false);
devicescontainer.add(addDeviceLink);
How do I get the Ajax powered DropDownChoice to work without first clicking the Add device link?
Edit: The generated ids of all the elements are complete and unique. The ListView items don't have ids, and it doesn't help if they do.
Turns out it was in fact the corporate JavaScript that caused the problem. I believe it calls the select2 jquery plugin on the <select>
s and such the Ajax gets overriden.
I just removed the entire script and now everything works fine.