onclick function does not work within a dhtml window
1) Script Title: onclick
The following short script has two tables and in its current form works fine.
When you click on the CDS column in the second table, the cell.onclick function gets called and displays an alert box with the value in the cell.
2) Script URL (on DD):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shen Lab of Bioinformatics and Molecular Biology at UNLV</title>
<link rel="stylesheet" href="windows_widget/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="windows_widget/dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script>
function addRowHandlers(table_name) {
var rows = document.getElementById(table_name).rows;
for (i = 0; i < rows.length; i++) {
rows[i].onclick = function(){ return function(){
var id = this.cells[0].innerHTML;
var content = this.cells[2].innerHTML;
divwin=dhtmlwindow.open('divboxdiv','div',content,id, 'width=1000,height=500px,left=280px,top=200px,resize=0,scrolling=1');
};}(rows[i]);
}
}
function add_wrky_data(wrky_data,num_records,html_table,field_names) {
var table = document.getElementById(html_table);
var rowCount = table.rows.length;
var indx = 0;
while (indx < num_records)
{
var row = table.insertRow(rowCount);
row_data = wrky_data[indx];
for (var index = 0; index < field_names.length; index+=1) {
if (field_names[index] != "CDS")
{ row.insertCell(index).innerHTML= row_data[field_names[index]]; }
else if (field_names[index] == "CDS")
{
row.insertCell(index).innerHTML= row_data[field_names[index]];
row.cells[index].onclick=function(){alert(this.innerHTML); };
}
}
indx = indx + 1;
rowCount = rowCount + 1;
}
}
</script>
</head>
<body>
<!-- ********************************************************************** -->
<!-- This is the main table -->
<center>
<table border="1" id="speciesTable">
<tr>
<th width="171">Scientific Name</th>
<th width="155">Common Name</th>
<th width="52">Data</th>
</tr>
</table>
<!-- Populate main table with species -->
<script type="text/javascript">
var table = document.getElementById("speciesTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= "Oryza sativa";
row.insertCell(1).innerHTML= "Rice";
row.insertCell(2).innerHTML= "tcontent_Os";
addRowHandlers("speciesTable"); // If user clicks a species, show the details
</script>
<!-- ***************************************************************************** -->
<!-- The table below is called when the user clicks on a species in the main table -->
<!-- If you uncomment out this section, the onclick functions in the second table stop working
<div class=contentborder style="display:none">
<div id="tcontent_Os" class="tabcontent">
-->
<br><br>
<table width="980" cellspacing="0" id="table1" border="1">
<th width="10">LN</th>
<th width="10">CDS</th>
</table>
<script type="text/javascript">
var array1 = new Array()
array1["LN"] = "LN101";
array1["CDS"] = "CDS101";
var array2 = new Array()
array2["LN"] = "LN257";
array2["CDS"] = "CDS257";
var data_array = new Array()
data_array[0] = array1;
data_array[1] = array2;
OsFields = ["LN","CDS"];
num_records = 2;
add_wrky_data(data_array,num_records,"table1",OsFields); // Add WRKY genes to table
</script>
</center>
</div>
3) Describe problem:
When the comments around the div tag (shown below) are removed, the second table is not displayed.
When the user clicks on the main table, the dhtml window opens up to display the second table.
The bug is that the onclick functions no longer work on the second table.
Code:
<!-- If you uncomment out this section, the onclick functions in the second table stop working
<div class=contentborder style="display:none">
<div id="tcontent_Os" class="tabcontent">
-->
Please fix this problem, or supply a workaround until this issue can be resolved.
Thanks
