PDA

View Full Version : InnerHTML of a DIV element

hybernate20
05-15-2009, 12:32 AM
Hello,

I hope that I'm in the correct forum for this...

I'm having a bit of trouble getting something to work with IE that works just fine with Firefox (big surprise there) and I was wondering if there was a better way to do it.

Basically, I'm just editing the innerHTML of a div element to add an input box for a form as long as a checkbox is checked. When I load the page everything is where it should be. I check my checkbox, the text field appears where I want it and everything is going well. When I uncheck the checkbox, I do a "elem.innerHTML="" to try to blank out the div contents. In firefox this works well... the DIV goes back to being empty and everything shifts back up to where it should be. For IE however, the text field disappears, but everything below it stays where it is... the DIV is empty but it is still holding its place in the page.

Is there a better way for me to do this? I could append and remove the element as a child, but that just seems like overkill for what I am trying to do here. Should I just do that, or is there a way to make IE work with my method?

Thanks,
adios
05-15-2009, 01:15 AM
innerHTML is the worst approach imo - precisely because of inconsistencies like the one you've run into. DOM is a better way to go - it's not overkill - but I'd consider toggling the display property of the box instead. If you'd like more info, or a demo, no problem - or post some html.
adios
05-15-2009, 03:01 AM
What the hell ...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<style type="text/css">
tr.toggle {
display: none;
}
</style>
<script type = "text/javascript">

function toggle(id)
{
var el = document.getElementById(id);
if (el)
{
var disval = /*@cc_on!@*/false ? 'block' : 'table-row'; //test for IE (not a clue!)
var state = (el.style.display == disval); //state
var tbox = el.getElementsByTagName('input')[0];
el.style.display = state ? 'none' : disval; //show-hide
tbox.disabled = state; //no data uploaded
if (!state)
{
tbox.focus(); //why not
}
}
}

window.onload = function() //register handler
{
var el = document.getElementById('trigger');
if (el)
{
el.onclick = function()
{
toggle('dependent');
}
}
if (el.checked)
{
toggle('dependent'); //keep things in sync
}
}

</script>
</head>
<body>
<form>
<table cellspacing="4" cellpadding="2" border="2">
<thead>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr><tr>
<td><select>
<option>***</option>
<option>***</option>
<option>***</option>
</select></td>
<td colspan="2"><input type="text" /></td>
</tr><tr>
<td colspan="3" align="center">more boxes!
<input id="trigger" type="checkbox" />
</td></tr>
<tr id="dependent" class="toggle">
<td colspan="3">
<input type="text" disabled="disabled" name="test" />
</td></tr><tr><td>
<input type="radio" />
</td><td>
<input type="radio" />
</td><td>
<input type="radio" />
</td></tr><tr><td>
<select>
<option>***</option>
<option>***</option>
<option>***</option>
</select>
</td>
<td colspan="2">
<input type="submit" />
</td></tr>
</tbody>
</table>
</form>
</body>
</html>
hybernate20
05-15-2009, 09:16 PM
Thanks! This makes much more sense than my solution. I'm fairly new to Javascript and DOM, so I don't really know the best way to accomplish things sometimes.
FJbrian
05-21-2009, 04:47 AM
Since this was answerred already, couldn't you just hide it and then un-hide it.
Go from a hidden form to one that's visible?