How can I make this work in IE?

Hi fellas.
I'm quite new to programming. I have been working with it for a couple of months now, so be gentle

As a part of a larger script I have a method to remove a movie from a dom element. I have made a feed that feeds YouTube videos. When you click on a video, the previously loaded movie will be removed and the new one inserted. This works as intended in FF and Opera, but in IE something is different. I guess maybe the dom structure is different? Instead of removing an elemnt, a new element is constructed it seems. Here is the function in question:

function removeMovie(element)
{
try
{
object = document.getElementById('movie');
while (object.childNodes[0])
{
object.removeChild(object.childNodes[0]);
}
}
catch(err)
{
txt="Error description: " + err.description;
alert(txt);
}
}

You can also see the whole thing in action at my test site: http://jonyngve.kommunion.no:81/video

 

Yea, the methods to remove elements are not truly cross browser yet, I found this out as well awhile back looking to do something similar- and just ended up changing my point of view on how the code should run. But I found this while looking for the answer and it might help you out- http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/.

Hope that works out =]

 

Thanks a lot for that pointer, Todd
Wouldn't it be nice if we could all just agree on a standard and not do things in different ways from browser to browser... well, that'll be the day

So to sum it up:
For IE, use "document.getElementById(“ID”).removeNode(true);" to remove an element, while "object.removeChild(object.childNodes[0]);" is the way to go in FF, Opera (and hopefully Safari and a few others that I have yet to test).

 

Yessir, but then of course in your Javascript you will have to either check to see what browser the JS is running in and act accordingly, or just run one method under a try block, then if it throws an error run the other. . .

Something like:

function removeElement(){
	try{
		document.getElementById(“ID”).removeNode(true); // For IE
	}
	catch (e){
		object.removeChild(object.childNodes[0]); // For FF and Others
	}
	return xmlHttp;
}

Code (markup):

(Of course that's not the full method, but I think you can get what I mean)

And if your not familiar with them; a try block will try a piece of code, and if it doesn't work it will run whatever is in the catch block.

Trouble is I'm not sure if it will throw an error, like when you tried to run the code that worked in FF, but didn't in IE- I'm not sure if that threw an error. So you might be better off using browser detection and a simple If Then for that method. . . Here's a neat passage on Javascript browser detection for you: http://www.quirksmode.org/js/detect.html

Good luck =]

 

Careful of the MS quotes: “ID”

that will mess up your script, use: "ID"

 

There is still something mysterious going on in IE. The initial movie does not show, and it still adds another element underneath the old one when I try to open another movie. I'll paste the entire script so that you can see it:

var my_div = null;
var newObject = null;
var newParam = null;
var newEmbed = null;
var d = null;
var element = null;
var id = null;
var autoPlay = null;

function showMovie(id, autoPlay) {

if (document.getElementById('movie')) {
this.removeMovie('movie');
}

newObject = document.createElement("object");
newObject.setAttribute('id','movie');
newObject.setAttribute('height','$height');
newObject.setAttribute('width','$width');

newParam = document.createElement("param");
newParam.setAttribute('name','movie');
newParam.setAttribute('value', "http://www.youtube.com/v/"+id+"&hl=en&autoplay="+autoPlay);

newParam2 = document.createElement("param");
newParam2.setAttribute('name', 'wmode');
newParam2.setAttribute('value', 'transparent');

newEmbed = document.createElement("embed");
newEmbed.setAttribute("src","http://www.youtube.com/v/"+id+"&hl=en&autoplay="+autoPlay);
newEmbed.setAttribute("type",'application/x-shockwave-flash')
newEmbed.setAttribute('wmode', 'transparent');
newEmbed.setAttribute('height', '$height');
newEmbed.setAttribute('width', '$width');

my_div = document.getElementById("parent");
my_div.appendChild(newObject);
newObject.appendChild(newParam);
newObject.appendChild(newParam2);
newObject.appendChild(newEmbed);
}

function removeMovie(element)
{
try
{
object = document.getElementById(element);
while (object.childNodes[0])
{
object.removeChild(object.childNodes[0]);
}
}
catch(err)
{
document.getElementById(element).removeNode(true);
}
}

The only notable difference I can see between IE and the others is that the object is inside a <div Class=""> while it's just <div> on the other browsers. Might be that an empty class reference makes the browser unhappy? (The script is loaded through a display class in Zend Framework).