Page 1 of 1

[Solved] Cloned Node not working in IE

Posted: Mon Jun 01, 2009 2:04 pm
by a.heresey
This code works fine in Firefox and generates no errors, but it generates an "Error: Object expected" with a wonky line number in IE.

Part of the page the code works on:

Code: Select all

 
<fieldset>
<legend>Guest List</legend>
 
<div id="guestList">
<!--<input type="button" name="regEdit" id="regEdit" value="edit" onclick="javascript&#058;history.go(-1)"/>

 
 
 
-->
<div id="guestForm1" class="guestForm">
 
<h4>Guest 1</h4>
 
<table>
<tr><td>
<label for="Guests[guest1][First]">First Name*:</label> </td><td>
<input type="text" name="Guests[guest1][First]" id="Guests[guest1][First]"  size="20"/><br /></td><td>
<label for="Guests[guest1][Last]">Last Name*:</label>          </td><td>
<input type="text" name="Guests[guest1][Last]" id="Guests[guest1][Last]" class="nochange"  size="20"  /><br /></td></tr>
 
<tr><td>
<label for="Guests[guest1][Email]">E-mail*:</label></td><td>
<input type="text" name="Guests[guest1][Email]" id="Guests[guest1][Email]" class="nochange"  size="20"  /><br /></td><td>
<label for="Guests[guest1][m]">YLS Member:</label> </td><td>
<input type="checkbox" name="Guests[guest1][m]" id="Guests[guest1][m]" value="true" checked="checked"/></td></tr>
</table>
 
</div>
</div>
 
<input type="button" name="addGuest" value="Add a Guest" onClick="addOne()"/> <input type="button" name="minGuest" value="Remove Last Guest" onClick ="takeOne()" id="take"/>
</fieldset>
The Javascript that's not working:

Code: Select all

 
function addOne(){  
    //up the guest count
    gnum += 1;
    //make the new names/ids/fors
    var form = 'guestForm'+gnum;
    var first = "Guests[guest"+gnum+"][First]";
    var last = "Guests[guest"+gnum+"][Last]";
    var email = "Guests[guest"+gnum+"][Email]";
    var member = "Guests[guest"+gnum+"][m]";
    /*add a set of fields for a guest*/
    
    //clone a guest form div
    var newGuest = document.getElementById('guestForm1').cloneNode(true);
    newGuest.setAttribute('id', form);
    
    //set the new title
    newGuest.getElementsByTagName('h4')[0].firstChild.nodeValue='Guest '+gnum;
    
    //set the new labels and Id's
    newGuest.getElementsByTagName('label')[0].for = first;
    newGuest.getElementsByTagName('input')[0].id = first;
    newGuest.getElementsByTagName('input')[0].name = first;
    newGuest.getElementsByTagName('input')[0].value = "";
    newGuest.getElementsByTagName('input')[0].readonly = "";
    newGuest.getElementsByTagName('input')[0].class = "changeme";
 
 
    newGuest.getElementsByTagName('label')[1].for = last;
    newGuest.getElementsByTagName('input')[1].id = last;
    newGuest.getElementsByTagName('input')[1].name = last;
    newGuest.getElementsByTagName('input')[1].value = "";
    newGuest.getElementsByTagName('input')[1].readonly = "";
    newGuest.getElementsByTagName('input')[1].class = "changeme";
 
    
    newGuest.getElementsByTagName('label')[2].for = email;
    newGuest.getElementsByTagName('input')[2].id = email;
    newGuest.getElementsByTagName('input')[2].name = email;
    newGuest.getElementsByTagName('input')[2].value = "";
    newGuest.getElementsByTagName('input')[2].readonly = "";
    newGuest.getElementsByTagName('input')[2].class = "changeme";
 
    
    newGuest.getElementsByTagName('label')[3].for = member;
    newGuest.getElementsByTagName('input')[3].id = member;
    newGuest.getElementsByTagName('input')[3].name = member;
    newGuest.getElementsByTagName('input')[3].checked = "";
    newGuest.getElementsByTagName('input')[3].readonly = "";
    newGuest.getElementsByTagName('input')[3].class = "changeme";
 
    
    //append the guest form div
    document.getElementById('guestList').appendChild(newGuest);
    
    //update the fee
    //document.getElementById('total').value = calDue();
    //show take one button
    document.getElementById('take').style.display = 'inline';
 
 
}
 
Any specific steps to take to get IE doing something other than sit there would be appreciated. I'm considering writing another, static, page for IE users... :(

Re: Cloned Node not working in IE

Posted: Mon Jun 01, 2009 2:07 pm
by pickle
It'd help to find the spot in the code that's generating the error. If you put alert()s in some spots, that will halt execution of your Javascript. You can then narrow down what line is actually causing the problem.

Re: Cloned Node not working in IE

Posted: Mon Jun 01, 2009 3:42 pm
by a.heresey
Hmm, put SEVEN alerts in the code, including one that would execute as soon as the function in question started executing. None appeared.

They all pop up as expected in firefox, but just the error pops up in ie. I'm calling the function as an event handler on a button in a form:

Code: Select all

 
<input type="button" name="addGuest" value="Add a Guest" onClick="addOne()"/>
 
Help? :?

Re: Cloned Node not working in IE

Posted: Mon Jun 01, 2009 4:30 pm
by a.heresey
Found the problem, it's setting the for attribute of the new label node. For's reserved in Javascript, so I assume that's why IE is having a hissy.

The for has to change for the labels to match the new form fields. So I have two options, take off the labels completely or find another way to add the for attribute.

Anyone know another way to set the "for" attribute on a cloned node?

Problem child is below:

Code: Select all

newGuest.getElementsByTagName('label')[0].for = first;

Re: Cloned Node not working in IE

Posted: Tue Jun 02, 2009 8:23 am
by a.heresey
This is what ended up working to set the for attribute on the cloned label node in both Firefox and IE:

Code: Select all

 
    newGuest.getElementsByTagName('label')[2].removeAttribute('for');
    var forEmail = document.createAttribute('for');
    forEmail.value = email;
    newGuest.getElementsByTagName('label')[2].setAttributeNode(forEmail);