Question

I have a JSF h:datatable with rows of data:

  <h:dataTable id="dataTable" value="#{SessionsController.dataList}" binding="#{table}" var="item">
                    <!-- Check box -->
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Select" />
                        </f:facet>
                        <h:selectBooleanCheckbox  onclick="highlight(this)" value="#{SessionsController.selectedIds[dataItem.id]}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:commandLink value="№" actionListener="#{SessionsController.sort}">
                                <f:attribute name="№" value="№" />
                            </h:commandLink>
                        </f:facet>
                        <h:outputText value="#{table.rowIndex + SessionsController.firstRow + 1}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
                                <f:attribute name="sortField" value="Account Session ID" />
                            </h:commandLink>
                        </f:facet>
                        <h:outputText value="#{item.aSessionID}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
                                <f:attribute name="sortField" value="User ID" />
                            </h:commandLink>
                        </f:facet>
                        <h:outputText value="#{item.userID}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
                                <f:attribute name="sortField" value="Activity Start Time" />
                            </h:commandLink>
                        </f:facet>
                        <h:outputText value="#{item.activityStart}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
                                <f:attribute name="sortField" value="Activity End Time" />
                            </h:commandLink>
                        </f:facet>
                        <h:outputText value="#{item.activityEnd}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
                                <f:attribute name="sortField" value="Activity" />
                            </h:commandLink>
                        </f:facet>
                        <h:outputText value="#{item.activity}" />
                    </h:column>
                </h:dataTable>

I want to give to the user ability to open a new page when he clicks on a row.
I found that JavaScript code to be useful:

   $("table#dataTable tbody tr").click(function () {
            window.location = $(this).find("a:first").attr("href");
        });

The problem is that I need a JSF tag which will be used by JavaScript to open new page when the row is clicked and pass data. In this example href is used to navigate to the new window. I need JSF tag which can be used for the same purpose. Is there suitable JSF tag?

Best wishes

Answer 1

You can just use plain HTML <a> in JSF.

<a href="page.xhtml">link</a>

Or <h:link>

<h:link value="link" outcome="page" />

---

Unrelated to the concrete question, as to your jQuery selector, don’t forget to take into account that JSF prepends the client ID with the ID of parent naming container components. Check the generated HTML output to be sure.