Question

I am using an extendedDataTable from Richfaces 4. I want to show a detail-page for the element in a row when the user clicks it. Therefore I have added something like

onrowclick="showDetails(#{item.id})"

to the table. This triggers a corresponding <a4j:jsFunction/> tag. This is working so far.

However, one of the columns has a commandLink in it (for switching to an edit-view of the details). The link works in webkit-based browsers (Chrome/Safari). But IE and firefox only execute the onclick on the row. The commandlink doesn’t work there.

Is it somehow possible to only set an oncolumnclick or the columns, that do not contain the commandlink? I havn’t found a way to add an onclick-handler to specific columns (I am using rich:column for the columns.)

Or is there a better/cleaner/nicer way to achive the “click somewhere in the row to show details, click the link in the last column to show the edit view”-behaviour I am after?

Answer 1

My current workaround HACK is to not use the onrowclick but add a styleClass="clickable" to all my columns except the one with the link. In the first column, I added the following:

<h:outputText value="#{item.id}" style="display: none;" styleClass="id"/>

Then after the table I use the following jQuery:

<rich:jQuery selector=".myTable td.clickable" query="live('click', function(event) {
                showDetails($(this).parent().children().children('.id').text());
              });"/>

I really don’t like this solution, but it is working fine so far.

I am still open for better solutions though 🙂