Exclude first column when opening new page

Question

I have a JSF table with row click. When I click on the select box new page is opened. How I can modify the column Select to be excluded from the selection.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <ui:insert name="header">           
            <ui:include src="header.xhtml"/>         
        </ui:insert>
        <script type="text/javascript">
            function addOnclickToDatatableRows() {
                //gets all the generated rows in the html table
                var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0]
                .getElementsByTagName('tr');
                //on every row, add onclick function (this is what you're looking for)
                for (var i = 0; trs.length > i; i++) {
                    trs[i].onclick = new Function("rowOnclick(this)");
                }
            }

            function rowOnclick(tr) {   
                var elements = tr.cells[0].childNodes;
                for(var i = 0; elements.length > i; i++) {
                    if ((typeof elements[i].id !== "undefined") &amp;&amp;
                    (elements[i].id.indexOf("lnkHidden") > -1)) {
                        //opne in a new window//  window.open(elements[i].href);
                        location.href=elements[i].href
                        break;
                    }
                }
                return false;
            }
        </script>
    </h:head>
    <h:body  onload="addOnclickToDatatableRows();">
        <!-- Demo click on row -->
        <h1><img src="resources/css/images/icon.png" alt="DX-57" /> History Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ui:insert name="Navigation">           
                <ui:include src="Navigation.xhtml"/>         
            </ui:insert>

        </div>  

        <div id="logodiv" style="position:relative; top:35px; left:0px;"> 
            <h:graphicImage alt="Demo Click on row"  style="position:relative; top:-20px; left:9px;"  value="" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMap" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">

                    <h:form id="form">

                        <ui:debug />

                        <!-- The sortable data table -->
                        <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]}" />
                                <!-- Click on table code -->
                                <h:outputLink id="lnkHidden" value="AnotherPage.xhtml"
                                              style="display:none">
                                    <f:param name="id" value="#{item.aSessionID}" />
                                </h:outputLink>
                            </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>

                        <!-- The paging buttons -->
                        <h:commandButton value="first" action="#{SessionsController.pageFirst}"
                                         disabled="#{SessionsController.firstRow == 0}" >
                            <f:ajax render="@form" execute="@form"></f:ajax>
                        </h:commandButton>


                        <h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
                                         disabled="#{SessionsController.firstRow == 0}" >
                            <f:ajax render="@form" execute="@form"></f:ajax>
                        </h:commandButton>

                        <h:commandButton value="next" action="#{SessionsController.pageNext}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" >
                            <f:ajax render="@form" execute="@form"></f:ajax>
                        </h:commandButton>    

                        <h:commandButton value="last" action="#{SessionsController.pageLast}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" >
                            <f:ajax render="@form" execute="@form"></f:ajax>
                        </h:commandButton>

                        <h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
                        <br />

                        <!-- The paging links -->
                        <ui:repeat value="#{SessionsController.pages}" var="page">
                            <h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
                                           rendered="#{page != SessionsController.currentPage}" >
                                <f:ajax render="@form" execute="@form"></f:ajax>   
                            </h:commandLink>
                            <h:outputText value="#{page}" escape="false"
                                          rendered="#{page == SessionsController.currentPage}" />
                        </ui:repeat>
                        <br />

                        <!-- Set rows per page -->
                        <h:outputLabel for="rowsPerPage" value="Rows per page" />
                        <h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
                        <h:commandButton value="Set" action="#{SessionsController.pageFirst}" >
                            <f:ajax render="@form" execute="@form"></f:ajax>
                        </h:commandButton>
                        <h:message for="rowsPerPage" errorStyle="color: red;" />

                    </h:form>                  

                </div>   

                <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

                </div>   
            </div>  
        </div>

        <script type="text/javascript">
            $("tr").not(':first').hover(
            function () {
                $(this).css("background","#707070");
            }, 
            function () {
                $(this).css("background","");
            }
        );              

            function highlight(param) {  
                var row = jQuery(param).parent().parent().children();
                row.toggleClass('highlited');
            }        
        </script>


    </h:body>
</html>

StepTNT · Accepted Answer · 2012-05-15T21:04:43.123

Just a stupid answer, hoping that I got what you're asking.

Why don't you just change

for (var i = 0; trs.length > i; i++) {
    trs[i].onclick = new Function("rowOnclick(this)");
}

to

for (var i = 1; trs.length > i; i++) {
        trs[i].onclick = new Function("rowOnclick(this)");
    }

?

Starting your loop from 1 should assign the onClick function from the second row, avoiding to bind it to the first one.

EDIT:

I've tested this script using the provided HTML and it seems to work. Clicking on the checkbox won't start the redirect, while clicking on the other columns does.

Test it on your page and let me know!

<script type="text/javascript">
        <!-- http://stackoverflow.com/questions/10566980/modify-javascript-to-exclude-first-column-from-opening-new-page -->

        function addOnclickToDatatableRows() {
            //gets all the generated rows in the html table
            var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0]
            .getElementsByTagName('tr');
            //on every row, add onclick function (this is what you're looking for)
            for (var i = 0; trs.length > i; i++) {
                var cells = trs[i].cells;                    
                for(var j=1; j<cells.length; j++){
                    cells[j].onclick = new Function("rowOnclick(this.parentElement)");
                }                    
            }
        }

        function rowOnclick(tr) {
                var elements = tr.cells[0].childNodes;
                for(var i = 0; elements.length > i; i++) {                           
                    if ((typeof elements[i].id != "undefined") && (elements[i].id.indexOf("lnkHidden") > -1)) {
                        //opne in a new window//  window.open(elements[i].href);
                        location.href=elements[i].href
                        break;
                    }
                }                
            return false;
        }
    </script>

What's not working? Does it still call the function when clicking on the first row? — StepTNT, May 12 '12 at 17:11
Excuse me I made a mistake. I need to exclude the column `Select` - the checkboxes from clicking and opening a new page. I made a mistake to write row instead of column. How I can exclude the first column `Select`? — Peter Penzov, May 12 '12 at 18:00
So you want that the click on the row will execute your javascript but NOT when the click in ir your first column? If so, can you post the generated HTML of your page? — StepTNT, May 15 '12 at 19:49
Yes, This is the generated HTML code from the JSF page http://pastebin.com/2Jx4cc1V — Peter Penzov, May 15 '12 at 20:10
I get this error: Error Traced[line: 21] The content of elements must consist of well-formed character data or markup. At this line is the problem `for(var j=1; j < cells.length; j++){` — Peter Penzov, May 16 '12 at 09:08
Take a look here http://stackoverflow.com/questions/8386945/content-of-elements-must-consist-of-well-formed-mark-up and let me know if it works. I wrote the script using your HTML page, so I didn't have any error, but seems that this script won't be correctly parsed in the jsf page! — StepTNT, May 16 '12 at 09:19
Yes, I placed into external file the JS code. It works! Thank you! — Peter Penzov, May 16 '12 at 11:35

Exclude first column when opening new page

1 Answers1