javaajaxwicketwicket-7

Wicket dynamic ListView - default item won't get updated by Ajax


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.


Solution

  • 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.