Question

I want to create a button that can show a window to show details of elements in listbox when it’s clicked. the listbox itsetf was created from a list of JSONObject like this:

<listbox id="userListbox">
<listhead>
    <listheader laber="Action"></listheader>
    <listheader label="Id"></listheader>
    <listheader label="Name"></listheader>
    <listheader label="Address"></listheader>
    <listheader label="Phone"></listheader>
</listhead>
<listitem forEach="${userController.list}">
    <listcell>
        <button label="Detail"  id="detailButton"></button>
    </listcell>
    <listcell label="${each.id}" ></listcell>
    <listcell label="${each.name}" ></listcell>
    <listcell label="${each.address}" ></listcell>
    <listcell label="${each.phone}" ></listcell>
</listitem>
</listbox>

for every row (listcell) there is always a button to show the details. but when I load the page, it failed to show the list with error message:

Not unique in ID space < Window cP8Q0#userWindow>: detailButton.

any idea to show a window when the button clicked? here is the code when button is clicked:

@Listen("onClick = #detailButton")
public void showModal(Event event) {
    Component comp = Executions.createComponents("/widgets/window/modal_dialog/employee_dialog.zul", null, null);

    if(comp instanceof Window) {
        ((Window)comp).doModal();
    }
}

thank you for your help.

Answer 1

<button label="Detail" />
@Listen("onClick = listbox listitem listcell button")