Table cell click event work with an f:ajax tag

Question

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:

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?
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

score 1 · Accepted Answer · answered May 04 '12 at 14:42

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.

Thank you for the quick response and answer. It Works beautifully!! — MikeR, May 04 '12 at 15:07

Table cell click event work with an f:ajax tag

1 Answers1