Wicket: Dropdown choice within ListView does not get onClick behaviour attached

Question

Basic problem description: I'm trying to build a ListView (table), which dynamically adds rows. Each row in the table contains a DropDownChoice, with an 'onchange' Ajax behaviour attached to it.

What I'm seeing: The first DropDownChoice in the table behaves correctly. Any others added to the table don't trigger the onUpdate method in my Java code.

I've inspected the HTML, and this is happening because only the first DropDownChoice in the table has an onchange handler attached to it.

Here's my table creation method:-

    private WebMarkupContainer createCommandTable() {

    commandTable = new WebMarkupContainer("commandTable");

    commandView = new ListView<CommandModel>("commandRow", new PropertyModel<List<CommandModel>>(this, "commandListModels")) {
        private static final long serialVersionUID = 6376139649874160166L;

        @Override
        protected void populateItem(ListItem<CommandModel> item) {
            final CommandModel model = item.getModelObject();

            item.add(createCommandDropdown(model));
            item.add(createParameterTable(model));
            item.add(createDeleteLink(model));
        }

    };

    commandTable.add(commandView);
    commandTable.setOutputMarkupId(true);

    return commandTable;
}

Here's my DropDownChoice creation method:-

    private DropDownChoice<Root.Command> createCommandDropdown(CommandModel model) {

    IChoiceRenderer<Command> renderer = new ChoiceRenderer<Command>("name");

    DropDownChoice<Root.Command> commandDropdown = new DropDownChoice<Root.Command>("commands", new PropertyModel<Root.Command>(model, "selectedCommand"), root.getCommand(), renderer); 


    commandDropdown.add( new AjaxFormComponentUpdatingBehavior( "onchange" ) {

        private static final long serialVersionUID = -7424498013668780417L;

        @Override
        protected void onUpdate( AjaxRequestTarget target ) {
            target.add(commandTable);
        }
    } );    

    commandDropdown.setNullValid(false);
    commandDropdown.setOutputMarkupId(true);

    return commandDropdown;
}

Here's a screenshot of my browser's inspector. You can see there is no onchange event handler for the second ListView item. However I notice that there are two event handlers on the first ListView item. In fact, I just added another row, and the first row's dropdown got another change event handler added to it. Why is the event handler not getting attached to the correct dropdown?

Answer 1

I notice both <select>s have the same id but different names. Could it be that the onchange handler gets attached to the id and therefore only works on the first component?

In general, don't specify id attribute in the HTML, let wicket handle it as it makes sure the ids are unique.