CODEWITHSUNDEEP
internet-explorer-7javascriptappendchild
CodeTweetie
CodeTweetie

Reputation: 6401

problem in using appendchild in IE7

Find below the js function that I'm using to add a new date field & 'Select Venue' link to an existing div with id 'coursedates' . Problem is this works fine in FF 3 & IE 8.
It doesnt work in IE7. If I alert the count(length) of 'dts' it always says 1, though it IE developer toolbar shows that the new date div is added to coursedates. I tried using innerHtml instead of appendchild, but in that case, the listeners of the old coursedt div's elements like selven+new_course_dt_index are lost. Is there a solution for this.

Thanks in advance.

addnewcoursedate: function () {

var dts = yud.getElementsByClassName('coursedt', 'div', 'coursedates');
var new_course_dt_index = parseInt(dts[parseInt(dts.length, 10)-1].id.split('coursedt')[1],10)+1;
var newdt = document.createElement('div');
newdt.setAttribute('class','coursedt');
newdt.setAttribute('id','coursedt'+new_course_dt_index);

var coursedt_htm = 
"<div class='clearfix flt_left'><label for='coursestartdt"+new_course_dt_index+"'>Start Date & Time </label><a href='javascript:NewCssCal(\"coursestartdt"+new_course_dt_index+"\",\"ddmmyyyy\",\"arrow\",true,12,false);'><img src='calbtn.gif' width='16' height='16' border='0' alt='Pick a start date & time'></a><br/>"+
    "<input type='text' id='coursestartdt"+new_course_dt_index+"' name='coursestartdt"+new_course_dt_index+"' value=''> </div>"+
    "<div class='flt_left'><a href='#' class='selven' id='selven"+new_course_dt_index+"'>Select Venues</a><br/><input type='hidden' name='venues"+new_course_dt_index+"' id='venues"+new_course_dt_index+"'><div class='selvenue' id='venueshw"+new_course_dt_index+"'>&nbsp;</div></div>"+
    "<div class='flt_rght clr_lft'><a href='javascript:YAHOO.modname.event_js.removecoursedate(\""+new_course_dt_index+"\");'><img title=\"Remove date\" src=\"clear_field.gif\" /></a></div>";
newdt.innerHTML = coursedt_htm;

var crsdts = yud.get('coursedates');
crsdts.appendChild(newdt);

var newbr = document.createElement('br');
newbr.setAttribute('class','lstclr');
newbr.setAttribute('id','lstclr'+new_course_dt_index);

crsdts.appendChild(newbr);

if ( YAHOO.modname.event_js.ven_dlgs[new_course_dt_index] == null ) {
    YAHOO.modname.event_js.ven_dlgs[new_course_dt_index] = _createVenueDialog(new_course_dt_index);
}

},

note: yud : YAHOO.util.Dom

Upvotes: 1

Views: 2182

Answers (2)

Constantino Cronemberger
Constantino Cronemberger

Reputation: 2261

I also found that this problem can happen when a function on one window tries to call appendChild on an element in another window, this means that both elements have to be on the same document (which is quite obvious), but at least IE should say something about this.

Upvotes: 0

CodeTweetie
CodeTweetie

Reputation: 6401

Found the problem. For some reason, IE7 was not recognising the class 'coursedt' added to the new div.

newdt.setAttribute('class','coursedt')

But it worked when I changed the code to the following :

var attr = document.createAttribute('class'); attr.value = 'coursedt'; newdt.setAttributeNode(attr);

This works for FF & IE 6,7,8.

Upvotes: 2

Related Questions