html javascript dom removing a tag

[canardo]

HI there if I had something like the following

<div id="myFrame">
     <iframe id="uploadIframe"> </iframe>
</div>

I want to remove uploadIframe and replace it with another
at the moment the only way I can find to do it is to have a css class that sets the visibility and width height to 0 is it possible using some javascript to actually remove the iframe tag

[BBK]

man, I've done this, so it can definitely be done. Sorry, but at the moment I can't find the code that did it, and I'm not good enough to figure it out easily

[salvadorescobar]

can't you just set the element within the DOM to whatever you want provided the type fits?

var currentIFrame = document.getElementById("uploadIFrame");

currentIFrame = newIFrame;

Or something like that?

[hxbro]

or maybe just overwrite the innerHTML of myFrame would work

[Kerry-Exile]

or maybe just overwrite the innerHTML of myFrame would work

That would be the best way to do it, we do stuff like that now, have your have a javascript function that will display the html you want depending on the option in your div

[Kerry-Exile]

ie

function showIFrame()
{
var myIFrame = document.getElementById("uploadIFrame");
var strHTML = "<iframe>";
strHTML += "<table>whatever iframe content</table>";
strHTML += "</iframe>";
myIFrame.innerHTML = strHTML;
}

That way you can change it on the fly

[canardo]

cheers for the advice guys I was being a bit of a tard and am tryign to create an upload box so that you dont have to page refresh or wait for it to upload by using the iframe.submit method

have done it like so

<script language="javascript">
		function upload()
		{
		
			// hide old iframe
			var par = window.parent.document;
			var iframe = par.getElementById('uploadFrame');
			iframe.className = 'hidden';
			iframe.height='0px';		
			alert("hidden old iframe");
	
			
			// create new iframe
			var new_iframe = par.createElement('iframe');
			new_iframe.src = 'upload.php';
			new_iframe.frameBorder = '0';
			new_iframe.width= '202px';
			par.getElementById('iframe').appendChild(new_iframe);
			
			alert("new iframe created");
					
			//setTimeout(document.iform.submit(),5000);	
			document.iform.submit();
			
			
			
			/*
			data_grid.fetchBuffer(0, false, true);
			data_grid.requestContentRefresh(0, true);
			*/
		}
		</script>

CSS Looks like this
#iframe {
	border-width: 0px;
	height: 120px;
	width: 203px;
	background: url('../images/assetLibrary/gui_nu_library_base.png');

}
		
.hidden {
	visibility: hidden;
	width:0px;
	height:0px;

}

HTML Looks like this

<div id='iframe'>
				
				<iframe src="upload.php" id="uploadFrame" frameborder='0' width="202px" ></iframe>
</div>

IFrame code looks like this

<form name="iform" action="" method="post" enctype="multipart/form-data">
		
		<div id="imageAddToLibraryBrowseButton">
			<input type="file" class="file" name="fileUpload" onChange="upload()"/>
			<div id="fakefile">					
				<img src="images/assetLibrary/BrowseButton.png" alt = "BrowseButton" />				
			</div>			
		</div> 	
		
	</form>