onclick function does not work within a dhtml window

**kwatts59** · 08-11-2015, 10:24 PM

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

**Beverleyh** · 08-12-2015, 05:24 AM

If this is a Dynamic Drive script, please provide the name of the script and a link to the demo page on this website. There are hundreds of scripts available via this website and it's extremely difficult to tell what you are using from the information posted.

Please also provide a link to the web page where it is installed on your site.

The code you've posted does not include the DD copyright notice (it should appear between the <script> tags) which violates usage terms of Dynamic Drive http://www.dynamicdrive.com/notice.htm

**kwatts59** · 08-12-2015, 05:56 PM

Thank you for your timely response. I apologize for the copyright notice, I added it to my post.
The production version of the program has the copyright notice but I had stripped the code down to the bare bones (including comments) prior to posting so that it is easier for you to pinpoint the bug.

The following link displays both tables, clicking on the CDS column of the second table displays a message
http://shenlab.sols.unlv.edu/kwatanabe/bug1.php

The following link displays the main table, clicking on the main table opens up a new window via the dhtmlwindow.open function and displays the second table.
When clicking on the CDS column of the second table, the message is no longer displayed.
http://shenlab.sols.unlv.edu/kwatanabe/bug2.php

The link below is where the dynamicdrive scripts were downloaded from
http://www.dynamicdrive.com/dynamici...ndow/index.htm

Thread: onclick function does not work within a dhtml window

Thread Tools

Search Thread

onclick function does not work within a dhtml window

Similar Threads

Can't make DHTML Modal window v1.1 to work

Calling a function on the dhtml window

DHTML Window widget (v1.1) not work in all pages

[MERGED] DHTML Window Widget: Need onMouseOver Handler Function

DHTML Window Widget - onClick event ?

Bookmarks

Bookmarks

Posting Permissions