Non-appearing table? [Archive]

coondog7820

04-02-2008, 10:48 AM

I am trying to dynamically create a table of data based on a result of json objects from an AJAX request. I have tried to use the appendChild DOM method to insert the html into a div, however I can never get the table to render. Here is the html code in my jsp for the div used to display the results:

<div id="searchWindow" style="width:600px; height:400px; border: 1px solid green; display:none; z-index:2; position:absolute; background-color:white;" >
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center" class="formlabel">Please select a patient</td>
</tr>
<tr>
<td> </td>
</tr>
<tr >
<td align="center" class="text">
<div id="searchTable">
</div>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>

Here is the javascript used to open this div and render the table:

var searchDiv = document.getElementById('searchWindow');
searchDiv.style.display = 'block';
var searchTableDiv = document.getElementById('searchTable');
var jsonObj = transport.responseText.evalJSON();
if(jsonObj.patientList.length > 0)
{
//Create table for the patients
var patientListTable = document.createElement("table");

//Create header row
var patientListTitleTr = document.createElement("tr");

var patientListSsnTitleTd = document.createElement("th");
patientListSsnTitleTd.appendChild(document.createTextNode("SSN:"));
patientListTitleTr.appendChild(patientListSsnTitleTd);

var patientListLastNameTitleTd = document.createElement("th");
patientListLastNameTitleTd.appendChild(document.createTextNode("Last Name:"));
patientListTitleTr.appendChild(patientListLastNameTitleTd);

var patientListFirstNameTitleTd = document.createElement("th");
patientListFirstNameTitleTd.appendChild(document.createTextNode("First Name:"));
patientListTitleTr.appendChild(patientListFirstNameTitleTd);

var patientListDobTitleTd = document.createElement("th");
patientListDobTitleTd.appendChild(document.createTextNode("DOB:"));
patientListTitleTr.appendChild(patientListDobTitleTd);
patientListTable.appendChild(patientListTitleTr);

//Create data rows
for(var i=0; i<jsonObj.patientList.length; i++)
{
var patientItem = jsonObj.patientList[i];

var patientListTr = document.createElement("tr");

var patientListSsnTd = document.createElement("td");
patientListSsnTd.className = "aligncenter";
patientListSsnTd.appendChild(document.createTextNode(patientItem.ssn));
patientListTr.appendChild(patientListSsnTd);

var patientListLastNameTd = document.createElement("td");
patientListLastNameTd.className = "alignleft";
patientListLastNameTd.appendChild(document.createTextNode(patientItem.lastName));
patientListTr.appendChild(patientListLastNameTd);

var patientListFirstNameTd = document.createElement("td");
patientListFirstNameTd.className = "alignleft";
patientListFirstNameTd.appendChild(document.createTextNode(patientItem.firstName));
patientListTr.appendChild(patientListFirstNameTd);

var patientListDobTd = document.createElement("td");
patientListDobTd.className = "alignleft";
patientListDobTd.appendChild(document.createTextNode(patientItem.dob));
patientListTr.appendChild(patientListDobTd);

patientListTable.appendChild(patientListTr);
}

searchTableDiv.appendChild(patientListTable);
}

NOTE: I'm using prototype to evaluate the JSON. I am also trying to view this in IE7

Here's the weird thing. throughout the element building process of creating the table I can confirm that the table is being built and the JSON data is being returned. Using IE Developer Toolbar I can confirm that the table is added to the DOM. If I add searchTableDiv.innerHTML = searchTableDiv.innerHTML; it will render the table but it seems to not apply all settings for styling properly. Am I missing something obvious? Is there an IE bug that is stopping me? Thanks in advance,

- Patrick Cooney

vwphillips

04-02-2008, 02:17 PM

I note that the generated table does not have a TBODY

The table must have a TBODY and the rows appended to the TBODY

example

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Table(){
var table=zxcES('TABLE',{},document.getElementById('tst'));
var tbdy=zxcES('TBODY',{},table);
var row=zxcES('TR',{},tbdy);
zxcES('TD',{},row,'text');
}

function TableBad(){
var table=document.createElement('TABLE');
var row=document.createElement('TR');
table.appendChild(row);
var cell=document.createElement('TD');
row.appendChild(cell);
cell.appendChild(document.createTextNode('textbad'));
document.getElementById('tst').appendChild(table);
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
if (zxcp) zxcp.appendChild(zxcele);
if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
return zxcele;
}

/*]]>*/
</script></head>

<body>
<div id="tst" ></div>
<input type="button" name="" value="Table" onclick="Table();"/></body>
<input type="button" name="" value="Bad Table" onclick="TableBad();"/></body>

</html>

coondog7820

04-02-2008, 08:11 PM

That did it! I need to start writing my html against latest standards because I get away without using tbody in my compiled jsp source.... but obviously the DOM is pickier. Thanks!