Javascript issue: Div innerHTML isn't displayed

matyg · Joined: 26 Nov 2006 Posts: 1

Hi, I am using the following code to add rows dinamically in a table. But! the problem is that I donâ€™t see the div I added (or the div isnâ€™t displayed).

I am using IE7.

///////////////////////////////////////////////////////////////////////////
This is the HTML code (as part of java struts platform):
///////////////////////////////////////////////////////////////////////////

<body class="popupBg" onLoad="init()">
<html:form action="/AdvancedSearch" method="post" target="self">
<html:hidden property="DispatchMethod" value="fetch"/>
<input type="hidden" value="0" id="theValue"/>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left">
<tr height="42">
<td><br>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr height="25" class="tableTitle">
<td class="title2">Advanced Search - <%= request.getParameter("SearchType") %></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="popupMain">
<tr height="5>
<td align="right">
<img src="Images\empty.gif" width="100%" height="10"><br>
<span class="buttonType1" onclick="addFilter()"><nobr>Add Filter</nobr>
</span>
</td>
</tr>
<tr>
<td><img src="Images\empty.gif" width="100%" height="1">
</td>
</tr>
<div id="filtersDiv">
</div>
<tr>
<td><img src="Images\empty.gif" width="100%" height="1">
</td>
</tr>
</table>
</td>
</tr>
<tr class="BottomTableBg">
<td align="right">
<img src="Images\empty.gif" width="100%" height="10"><br>
<span class="buttonType1" onclick="CloseWindow()"><nobr>Submit</nobr></span>
</td>
</tr>
</table>
</html:form>
</body>

/////////////////////////////////////////////////////////////////////
The javascript is:
/////////////////////////////////////////////////////////////////////

function addFilter()
{
var ni = document.getElementById("filtersDiv");
var numi = document.getElementById("theValue");
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var newdiv = document.createElement("div");
newdiv.setAttribute("id", divIdName);
newdiv.setAttribute("style", "visibility: visible");

var divIdName = "filter" + num + "Div";
var fieldSelectName = "fields" + num;
var criteriaSelectName = "criterias" + num;
var filterValuesName = "filterValues" + num;

var tr1 = document.createElement("tr");
tr1.setAttribute("height", "28");

var td1 = document.createElement("td");
td1.setAttribute("align", "left");
td1.setAttribute("width", "25%");

var fieldSelect = document.createElement("select");
fieldSelect.setAttribute("name", "abc");

var fieldSelectOp0 = document.createElement("option");
fieldSelectOp0.setAttribute("value", "0");
var fieldSelectOp0Text = document.createTextNode("Select Field");
fieldSelectOp0.appendChild(fieldSelectOp0Text);
fieldSelect.appendChild(fieldSelectOp0);
td1.appendChild(fieldSelect);
tr1.appendChild(td1);
newdiv.appendChild(tr1);

ni.appendChild(newdiv);
}

function init()
{
alert('Start Init');
addFilter();
alert('End Init');
}

Corey Bryant · Posted: Sun Nov 26, 2006 6:06 am

Check out International Web Developers Network for this type of question. I think you would have better luck getting a response there

_________________
Corey
Toll Fax Numbers | Merchant Accounts

degsy · Joined: 23 Feb 2005 Posts: 2440 Location: North East, UK

Also checkout the Devshed forums

dwees · Joined: 12 Dec 2006 Posts: 1

setAttribute isn't properly supported in IE, so my suggestion is to use the css names themselves.

For instance, instead of setAttribute("id", "value"); use

element.id = "value";

similarly,

element.name = "value";

This also makes your code slightly easier to read.

For css selectors you would use, for example, element.style.backgroundColor = "white"; or element.style.width = "100px";

Also I notice that you are using divIdName earlier in your script than you have defined it, which is a problem, that won't work.

I would also add all the children to newDiv after attaching it to its parent, THEN set its visibility to visible, although generally this will happen quickly enough that there won't be a problem with a flicker.

Dave

ghinton · Joined: 11 May 2007 Posts: 1

"setAttribute isn't properly supported in IE, so my suggestion is to use the css names themselves.

For instance, instead of setAttribute("id", "value"); use

element.id = "value";

similarly,

element.name = "value";

This also makes your code slightly easier to read."

I'm sorry, but that statement is complete rubbish.
setAttribute is, and has been supported in IE since at least version 5.5, and is also supported in Mozilla.

You will find furthermore that if you want to set custom attributes on an element, the ONLY way you can do this and then retrieve them in Mozilla is to use setAttribute, and then use the attributes collection of the element to get them back.