Search code examples
ajaxjsf-2uirepeat

Table cell click event work with an f:ajax tag

I have been playing around with JSF and ui:repeat to create a simple dynamic table. My next step in teh process is to allow each cell in the table to be clickable/edited and started to tie in f:ajax around an h:outputlabel. This is where my dilemma begins because I would like the entire cell to be clickable, not just the contents/text of the cell and I haven't found a way to make the cell respond to an ajax click.

I have been doing a lot of searching but haven't found the direction that I need or a JSF expert to say "That's not possible".

So, my questions are:

  1. is there a jsf component that can be used that can work with f:ajax tag and can also be formatted to fit a table cell?
  2. is there a way to make the actual table cell click event work with an f:ajax tag or something similar.

As always thanks for the input and suggestions!

Regards,

Mike

Solution

  • There is no standard JSF component which generates a <td> with an onclick attribute.

    Your best bet is to include a <h:commandLink> in the table cell and let it span the entire space of the table cell by setting its CSS display property to block.

    <td>
    <h:commandLink ... style="display:block;">
        <f:ajax ... />
        <h:outputLabel ... />
        ...
    </h:commandLink>
</td>

    (note that best practice is to specify CSS classes in a separate .css file and to use styleClass instead; the above is just examplary)

    This gives the enduser the impression that the entire table cell is clickable.