Please a workaround for this appendchild IE Problem.

engelsol

Aug 11th 2007, 5:15 pm

This JS code works great in Firefox, Opera, but not in Internet Explorer...

The problem is this line:

el_Label.appendChild(newtext);

I open a second window with a image selector by click, the selected images then are added to a form in the first windows.

<table class="hairline" style="font-size: 10px">
<tr>
<td><img onCLick="javascript:addMedia(this);" id="ID-NUMBER" src="IMAGE" alt="TEXT" width="90" /></td>
</tr>

<tr>
<td><img onCLick="javascript:addMedia(this);" id="ID-NUMBER" src="IMAGE" alt="TEXT" width="90" /></td>
</tr>
</table>

// Add media

function addMedia(obj)

{

if (opener.document.getElementById('media-' + obj.id)) {

alert('Media already exists.');

} else {

var el_main = opener.document.getElementById('media-container');

// Create list element
el_Media = opener.document.createElement('li');
el_Media.id = 'media-' + obj.id;
el_Media.className = 'thumbnail';
//el_Media.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode);};

// Create hidden input field
el_INPUT = opener.document.createElement('input');
el_INPUT.name = "media[]";
el_INPUT.value = obj.id;
el_INPUT.type = "hidden";

// Add mediaThumb
el_IMG = opener.document.createElement('div');
el_IMG.id = 'mediaThumb-' + obj.id;
el_IMG.className = 'mediaThumb';
el_IMG.style.backgroundImage = "url('" + obj.src + "')";

// Add remove button
el_Label = opener.document.createElement('div');
el_Label.id = 'mediaLabel-' + obj.id;
el_Label.className = 'mediaLabel';
el_Label.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode);};
var newtext = document.createTextNode("Remover");

// Add it to the document
el_Media.appendChild(el_INPUT);
el_Media.appendChild(el_IMG);
el_Media.appendChild(el_Label);
el_Label.appendChild(newtext);
el_main.appendChild(el_Media);

opener.initMedia();

}

}

I know there are problems with IE and appendchild... please point me to a workaround even if adding an new external JS or someting.

Engel

Mike H.

Aug 12th 2007, 4:33 am

This works for me in IE and FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function addMedia(obj){

if (document.getElementById('media-' + obj.id))
{
alert('Media already exists.');
return;
}

var el_main = document.getElementById('media-container');

el_Media = document.createElement('li');
el_Media.id = 'media-' + obj.id;
//el_Media.className = 'thumbnail';

el_main.appendChild(el_Media);

el_INPUT = document.createElement('input');
el_INPUT.name = "media[]";
el_INPUT.value = obj.id;
el_INPUT.type = "hidden";

el_Media.appendChild(el_INPUT);

el_IMG = document.createElement('div');
el_IMG.style.width = "120px";
el_IMG.style.height = "90px";
el_IMG.style.border = "1px solid black";
el_IMG.id = 'mediaThumb-' + obj.id;
//el_IMG.className = 'mediaThumb';
el_IMG.style.backgroundImage = "url('" + obj.src + "')";

el_Media.appendChild(el_IMG);

el_Label = document.createElement('div');
el_Label.id = 'mediaLabel-' + obj.id;
//el_Label.className = 'mediaLabel';
el_Label.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode)}
el_Label.style.cursor = "pointer";
el_Label.appendChild(document.createTextNode("Remover"));

el_Media.appendChild(el_Label);
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}

</style>
</head>
<body>
<ul id="media-container"></ul>
<table class="hairline" style="font-size: 10px">
<tr>
<td><img onclick="addMedia(this);" id="ID-NUMBER1" src="1/Cleve1.jpg" alt="TEXT" width="90" /></td>
</tr>

<tr>
<td><img onclick="addMedia(this);" id="ID-NUMBER2" src="1/Cleve2.jpg" alt="TEXT" width="90" /></td>
</tr>
</table>
</body>
</html>