Style setting for generated DIVs

[verrice]

Hello,

I'm writing a web application where I want to load bits of data at
runtime from the client end (via AJAX). The loading of the data part
works great, but for some reason anytime I try to impart a style
setting (via either putting it inline, a CSS, or through javascript)
the DIV completely ignores my setting. The setting most importantly I'm
trying to apply is display: none, but none of them work.

If I pre-create everything (straight html) all the style changes and
methods work fine, just not on generated DIVs.

TIA,
Randy

[web.dev]

ve*****@gmail.com wrote:

Hello,

I'm writing a web application where I want to load bits of data at
runtime from the client end (via AJAX). The loading of the data part
works great, but for some reason anytime I try to impart a style
setting (via either putting it inline, a CSS, or through javascript)
the DIV completely ignores my setting. The setting most importantly I'm
trying to apply is display: none, but none of them work.

If I pre-create everything (straight html) all the style changes and
methods work fine, just not on generated DIVs.

TIA,
Randy

To help you get started, it would be nice if you at least gave us a
snippet of the code that is supposed to do all that you say. Then we
can try to diagnose the problem.

[Verrice]

Here's the code that does all the work (sorry for the lack of
commenting, I haven't gotten there yet):

function fillContent(url, obj) {

var http_request = false;

if( window.XMLHttpRequest ) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
if( http_request.overrideMimeType ) {
http_request.overrideMimeType('text/xml');
}
} else if( window.ActiveXObject ) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch( e ) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch( e ) {}
}
}

if( !http_request ) {
alert('Giving up: (Cannot create an XMLHTTP instance');
return false;
}

http_request.onreadystatechange = function() {
alertContents(http_request, obj); };
http_request.open('GET', url, true);
http_request.send(null);

return false;

}

function alertContents(http_request, obj) {

if( http_request.readyState == 4 )
{
if( http_request.status == 200 )
{
var xmldoc = http_request.responseXML;
var root = xmldoc.getElementsByTagName('root');
if( root[0].getAttribute("id") == "Product List" )
{
showProdList(root, obj);
}
} else {
alert('There was a problem with the request.');
alert(http_request.status);
}
}

}

function showProdList(root, obj)
{
var prods = root[0].childNodes;
obj.innerHTML = "";
for( var i=0; i<prods.length; i++ )
{
drawProduct( prods[i], 0, obj );
}
}

function drawProduct(ele, level, obj)
{
var space = "";
for( var sp=0; sp<level; sp++ )
{
space += "&nbsp;&nbsp;";
}

var dispName = new String( ele.getAttribute("id") );
var id = new String();
var imgSrc = new String( "images/folder.gif" );
for( var sl=0; sl<dispName.length; sl++ )
{
if( dispName.charAt(sl) != " " && dispName.charAt(sl) != "." )
{
id += dispName.charAt(sl);
}
}

var ch = ele.getElementsByTagName("product");
if( ch.length < 1 )
{
imgSrc = "images/text.gif";
}

obj.innerHTML += " <a id=\"x" + id + "\"
href=\"javascript:Toggle('" + id + "');\">";
obj.innerHTML += " <img src='" + imgSrc + "' width='16'
height='16' hspace='0' vspace='0' border='0'>";
obj.innerHTML += " </a>";
obj.innerHTML += " <b>" + dispName + "</b><br/>";
obj.innerHTML += "<div id='" + id + "' class=\"subitem\">";
var children = ele.childNodes;
for( var i=0; i<children.length; i++ )
{
if( children[i].getAttribute("parent") == ele.getAttribute("id")
)
{
drawProduct( children[i], level+1, obj );
}
}

obj.innerHTML += "</div>";
}

[Verrice]

Here's the version of the actual drawing function that includes inline
style information instead of a class in a CSS...

function drawProduct(ele, level, obj)
{
var space = "";
for( var sp=0; sp<level; sp++ )
{
space += "&nbsp;&nbsp;";
}

var dispName = new String( ele.getAttribute("id") );
var id = new String();
var imgSrc = new String( "images/folder.gif" );
for( var sl=0; sl<dispName.length; sl++ )
{
if( dispName.charAt(sl) != " " && dispName.charAt(sl) != "." )
{
id += dispName.charAt(sl);
}
}

var ch = ele.getElementsByTagName("product");
if( ch.length < 1 )
{
imgSrc = "images/text.gif";
}

obj.innerHTML += " <a id=\"x" + id + "\"
href=\"javascript:Toggle('" + id + "');\">";
obj.innerHTML += " <img src='" + imgSrc + "' width='16'
height='16' hspace='0' vspace='0' border='0'>";
obj.innerHTML += " </a>";
obj.innerHTML += " <b>" + dispName + "</b><br/>";
obj.innerHTML += "<div id='" + id + "' style=\" display: none;
margin-left: 2em\">";
var children = ele.childNodes;
for( var i=0; i<children.length; i++ )
{
if( children[i].getAttribute("parent") == ele.getAttribute("id")
)
{
drawProduct( children[i], level+1, obj );
}
}

obj.innerHTML += "</div>";
}

[Verrice]

Actually... I -may- have found an answer to my problem. Instead of
using innerHTML, it looks like it might work better creating a div
element and using appendChild. Still have to work with it a little more
to see if it will work.

[Verrice]

Okay, it does work now. Here are the two functions I changed for
reference:

function showProdList(root, obj)
{
var prods = root[0].childNodes;
obj.innerHTML = "";

var d = document.createElement("div");
d.className = "subitem";
obj.appendChild( d );

for( var i=0; i<prods.length; i++ )
{
drawProduct( prods[i], 0, d );
}
}

function drawProduct(ele, level, obj)
{
var space = "";
for( var sp=0; sp<level; sp++ )
{
space += "&nbsp;&nbsp;";
}

var dispName = new String( ele.getAttribute("id") );
var id = new String();
var imgSrc = new String( "images/folder.gif" );
for( var sl=0; sl<dispName.length; sl++ )
{
if( dispName.charAt(sl) != " " && dispName.charAt(sl) != "." )
{
id += dispName.charAt(sl);
}
}

var ch = ele.getElementsByTagName("product");
if( ch.length < 1 )
{
imgSrc = "images/text.gif";
}
if( imgSrc == "images/text.gif" )
{
obj.innerHTML += " <img src='" + imgSrc + "' width='16'
height='16' hspace='0' vspace='0' border='0'>";
}
else
{
obj.innerHTML += " <a id='x" + id + "'
href=\"javascript:Toggle('" + id + "');\"><img src='" + imgSrc + "'
width='16' height='16' hspace='0' vspace='0' border='0'></a>";
}
obj.innerHTML += " <b>" + dispName + "</b><br/>";

var d = document.createElement("div");
d.id = id;
d.style.display = "none";
d.style.marginLeft = "2em";
d.className = "subitem";
obj.appendChild( d );

var children = ele.childNodes;
for( var i=0; i<children.length; i++ )
{
if( children[i].getAttribute("parent") == ele.getAttribute("id")
)
{
drawProduct( children[i], level+1, d );
}
}

}