Issue
I am trying to load page2.jsp into a DIV tag in page1.jsp using Ajax. Further, page2.jsp has a hidden (visibility: hidden) DIV tag inside a table element and this DIV tag also has HTML form elements.
Now on page1.jsp, when I try to unhide the nested DIV tag, the textual content of the DIV tag shows up, but the FORM content disappears!
Reason
1. Some issue with IE HTML compliance. The above scenario is not on issue on Firefox2. But is an issue on IE7
2. This is probably something to do with z-index for the DIV tag and the default given to the FORM elements. I was never able to figure that out anyway
3. The DIV tag in page2.jsp has position: relative. position: absolute would not cause any problems, but of course, that setting is not what I needed
Work Around
I created a 2nd DIV tag on page2.jsp, right underneath the first DIV tag. It looks something like this
<a onclick="toggleDiv('buddydiv', false); toggleDiv('spacerdiv1', true);">
<div id="buddydiv" style="position: absolute; visibility: hidden;">
<input name="send_email" id="sendemail" value="checkbox" type="checkbox">
</div>
<div id="spacerdiv1" style="position: absolute; height: 160px; visibility: hidden "> </div>
Definition of toggleDIV
function toggleDiv(layerid, blockStyle) {
if(document.getElementById) {
var obj1 = document.getElementById(layerid);
if(obj1.style.visibility=='visible') {
obj1.style.visibility = "hidden";
if(blockStyle==true)
obj1.style.position = "absolute";
} else {
obj1.style.visibility = "visible";
if(blockStyle==true)
obj1.style.position = "relative";
}
}
}