...

View Full Version : appendChild Problemin IE



umesh.awasthi
03-29-2009, 10:28 AM
HI All,
i am new to javascript so may be doing something wrong.i am trying to create dynamic textbox using javascript.
i developed code in a seperate page and it worked fine but when i merged this code in my project work its not working fine in IE.
problem seems to be occuring while trying to use appendChild() method.

below is the code snapshot

<%@ taglib prefix="s" uri="/struts-tags"%>


<table>
<tr>
<td align="right">
<b>Challan Preferences</b>
<br/>
</td>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="100%">


<script type="text/javascript" language="JavaScript" src="js/DynamicTextBox.js"></script>



<tr>
<td>


<div id="ChallanPreferences" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>No of Plates</em></a></li>
<li class="selected"><a href="#tab2"><em>Plates Types</em></a></li>
<li><a href="#tab3"><em>Colors</em></a></li>
<li><a href="#tab4"><em>Machines</em></a></li>

</ul>
<div class="yui-content">

<div id="tab1"></br>Number of plates specify, maximum numbers of plates you can use for any printing job</br>
You can specify any integer value specifying numbers of plates you can use.</br>
</br>

<table width="100%" >

<tr>

<td height="5" colspan="6"><img src="images/spacer.gif" alt="" width="8" height="1" border="0"></td>
</tr>
<tr >
<td class="labelBold" id="cstNumber">
<s:form>
<input class="inputText" type="Text" size="20" name="noOfPlates" value="">
<input type="submit" value="Update Plates No">
</s:form>
</td>

</tr>
<tr>
<td height="5" colspan="6"><img src="spacer.gif" alt="" width="8" height="1" border="0"></td>

</tr>
</table>



</div>
<div id="tab2"></br>Plate type specify, maximum numbers of plates you can use for any printing job</br>
You can specify any integer value specifying numbers of plates you can use.</br>
</br>

<table width="100%">

<tr>

<td height="5" colspan="6"><img src="images/spacer.gif" alt="" width="8" height="1" border="0"></td>
</tr>
<tr >
<td class="labelBold" id="cstNumber">
<s:form>
<input class="inputText" type="Text" size="20" name="newPlateType" id="newPlateType" value="Enter New Plate Type" onclick="clearText()">
<input type="button" value="Add New Plate Type" onclick="addNewTextBox()">
</s:form>
</td>

</tr>
<tr>
<td height="5" colspan="6"><img src="spacer.gif" alt="" width="8" height="1" border="0"></td>

</tr>
</table>

<div id="NewPlateType"></div>

</div>
</div>

</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('ChallanPreferences');


})();
</script>

</td>
</tr>
</table>

above page is being used in another page

<html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<head>


<title>BillSmart 1.0</title>




</head>

<body id="yahoo-com" class=" yui-skin-sam">


<table width="750px" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>

<td colspan="2"><s:include value="TopPane.jsp"></s:include></td>
</tr>
<tr>


<td width="850px" valign="top" height="500px">

<s:include value="MyTextCreatingPage.jsp"/>

</td>

</tr>
<tr>
<td colspan="2"><s:include value="../Frames/Footer.jsp"></s:include></td>
</tr>
</table>
</body>
</html>




here is the javascript code
function addNewTextBox() {
var type="text";


//Create an input type dynamically.
var element = document.createElement("input");
var breakTag="</br>";

//Assign different attributes to the element.
element.setAttribute("type", type);

element.setAttribute("value", type);

element.setAttribute("name", type);

var foo = document.getElementById("NewPlateType");

//Append the element in page (in span).

foo.appendChild(element);

foo.appendChild(breakTag);

}

this problemis only coming in IE in others browser its working fine
IE is displaying following error
unexpected call to method or property access.

abduraooft
03-29-2009, 01:17 PM
Validate your code and fix all errors (http://validator.w3.org/#validate_by_input). You can't have the same id for multiple elements.

PS: welcome to CF.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum