Experiencing a puzzling issue while attempting to add click functionality to table rows with AJAX, here is the JavaScript code used:
//for tabs
$(document).ready(function () {
$("#tabs").tabs();
});
$(window).load(function() {
jsf.ajax.addOnEvent(function (data) {
if (data.status === "success") {
$("#tabs").tabs();
}
});
});
$("tr").not(':first').hover(
function () {
$(this).toggleClass('highlited');
// $(this).css("background","#707070");
},
function () {
$(this).toggleClass('highlited');
// $(this).css("background","");
}
);
function highlight(param) {
var row = jQuery(param).parent().parent().children();
row.toggleClass('highlited');
// row.css("background","#707070");
}
var inputs = document.getElementsByTagName("INPUT");
for (var i in inputs) {
if (inputs[i].checked) {
highlight(inputs[i]);
}
}
//for clicking on a row and 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;
}
This is the JSF page setup:
<?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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"></script>
<link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:head>
<h:body onload="addOnclickToDatatableRows();">
<h1><img src="resources/css/images/icon.png" alt="DX-57" /> History Center</h1>
<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="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_sessions.png" />
</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">
<h:dataTable id="dataTable" value="#{SessionsController.dataList}" binding="#{table}" var="item">
<h:column>
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" />
<h:outputLink id="lnkHidden" value="HistoryLink.xhtml" style="display:none">
<f:param name="id" value="#{item.aSessionID}" />
</h:outputLink>
</h:column>
<h:column>
...
</h:column>
</h:dataTable>
...
//Additional buttons and features added here
</h:form>
</div>
</div>
</div>
</h:body>
</html>
Facing issues with the AJAX implementation where clicking on datatable rows only works when initially loaded but breaks when switching pages. Is it possible that calling the JavaScript code twice in different locations may be causing the problem?