Problem setting an attribute loaded by AJAX

[westcoast]

Hi folks!

This is the Javascript function that I use to hide/show DIV content. I use it everywhere without problems:

<SCRIPT LANGUAGE="JavaScript" type="text/css">
<!--
function showHide(elementid){ if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
//-->
</SCRIPT>

Called by:

<A HREF="javascript:showHide('div6')">SECTION TITLE</a></font>
<div id="div6" style="display:none;">
This text will become visible when section title is clicked.
</div>


However, I get strange behavior when the above DIV is located within an AJAX response. My main page loads another HTML page into a div, and within THAT div is the "div6" above.

document.getElementById(elementid) returns "div6", and document.getElementById(elementid).style.display returns "none", as expected.

However, the set command is ignored. Nothing happens:
document.getElementById(elementid).style.display = '';

BUT, if I do an alert after the set, the element returns display as "".

So it's setting the element, but style.display is having no visible effect on the actual element.

Can anyone help explain how I can fix this?

Thanks

[Tcobb]

I do not know for certain, but I suspect your 'showHide()' function is being fired before the new 'div6' has been incorporated within the DOM tree. There isn't enough code here to tell.

[westcoast]

Thanks for the reply. The function shouldn't be executed until the onclick() is executed though, right?

Or is the function being DEFINED before the div6 is in the DOM a problem?

How would I correct this issue? Declare the function IN the loaded ajax?

[Tcobb]

Once again--there isn't enough of your code posted here to do much more than speculate.

Could it be for example that your function is working on the currently existing 'div6' but THEN the AJAX response comes replacing it with contents that set the inline style display property to "none?"

And is your AJAX request made asynchronously or not? That too could make a big difference.