Question

I’m trying to display html text received from the server in a datatable row.

The form looks like this:

<h:form id="carPageForm" prependId="false">

                <p:dataTable var="car" value="#{tableBean.lazyModel}" paginator="true"
                    rows="10" rowKey="#{car.id}" widgetVar="carsTable"
                    paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                    selectionMode="single"
                    selection="#{tableBean.selectedCar}" id="carTable">

                    <f:facet name="header">
                        <p:outputPanel>
                            <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="float:right"/>
                            <h:outputText value="Search all fields:" style="float: right; margin-top: 2px;" />
                        </p:outputPanel>
                    </f:facet>

                    <p:ajax event="rowSelect" update=":carPageForm:display"
                        oncomplete="carDialog.show()" />

                    <p:column id="idColumn" filterBy="#{car.id}" style="display:none"
                        filterMatchMode="contains">
                        <h:outputText value="#{car.id}" />
                    </p:column>

                    <p:column id="adColumn" filterBy="#{car.ad}" filterStyle="display:none">
                        <h:outputText value="#{car.ad}" escape="true"/>
                    </p:column>
                </p:dataTable>

                <p:dialog header="Car Detail" widgetVar="carDialog"
                    resizable="false" showEffect="scale" hideEffect="explode">

                    <h:panelGrid id="display" columns="2" cellpadding="4">

                        <h:outputText value="Title:" />
                        <h:outputText value="#{tableBean.title}" style="font-weight:bold" />

                        <h:outputText value="Description:" />
                        <h:outputText value="#{tableBean.description}"
                            style="font-weight:bold" />

                        <h:outputText value="Price:" />
                        <h:outputText value="#{tableBean.price}" style="font-weight:bold" />
                    </h:panelGrid>
                </p:dialog>

            </h:form>

The table with escape="true"


Now if I click anywhere on the rows, the rowSelect event is fired and the dialog box is opened.
But if I set escape="false" so that the text in the rows is both bold and underlined like this:


then only when I click in the blank area after the text is the rowSelect event fired. If I click anywhere on the text then nothing happens.

Even if I simply add the bold tag before <h:outputText> i.e.
<b><h:outputText value="#{car.ad}"/></b>, even then the select event is called only if I click anywhere in the row, but on the text.

Could someone please tell me how to handle this?

Answer 1

This is because when you choose to not escape the value of outpuText then it actually renders the html elements within the coresponding div tag. When you are clicking the text itself you are actually clicking the bold and underline HTML elements and the jQuery click event is not getting registered to the table row.

This click event is bound to elements of the class ui-dt-c so if you wrap the text within your html elements with a div that has this class then clicking the text will trigger the click event.

<b><u><div class="ui-dt-c"> e78fe894 Ferrari Blue 1994 </div></u></b>