Ie Issue - Very Strange

[djp1988]

Hello all,I have a script which creates list elements on the fly with DOM scripting, and the most unusual error I've come across with IE to date, here's the script:

		var elem = this;		var val = elem.value	var new_li = document.createElement('li');	new_li.setAttribute('value', val);	var new_text = document.createTextNode('new element');	new_li.appendChild(new_text);	var span = document.createElement('span');	var delete_button = document.createTextNode('X');	span.appendChild(delete_button);	new_li.appendChild(span);	document.getElementById('my_ul_list').appendChild(new_li);

The error happens on line 4 (new_li.setAttribute('value', val); ), it doesn't create an error as usual, it just crashes IE !But the strange thing is if I move that line down to just before I add the new LI to my UL, then it doesn't crash, I am wondering what could cause IE to crash,Any ideas?

[justsomeguy]

Why are you trying to assign something to the value attribute of an li element anyway? According to the spec, the value attribute for an li lists which position it is in the list, but it has been deprecated. It also expects an integer there, is the value you're assigning an integer? If you really need to give it a value and it doesn't crash when you move the line farther down, why not just move it? You could try to figure out why IE has the bugs that it has, but that turns out to generally be a waste of time.

[djp1988]

I think it's very important to understand the software in which you applications run.I am a student in application development and I find it very curious that moving a line down cures the crash. Maybe it's to do with the memory?

[dsonesuk]

IE does not support setattribute, a workaround isif(navigator.userAgent.indexOf("MSIE") != -1) { new_li.value = val; } else { new_li.setAttribute('value', val); }}what i'm getting from FF when looking at selected source is <li value="undefined">new element<span>X</span></li>IE displays the li with text, can't get source to compare though.

[justsomeguy]

I've used setAttribute extensively with IE, it works fine in versions 6 through 8.

I am a student in application development and I find it very curious that moving a line down cures the crash. Maybe it's to do with the memory?

Yeah it could have to do with memory, it could have to do with the parsing engine, or the rendering engine, or the Javascript engine. If you want to figure out why it does what it does you need to get the source code from Microsoft and audit it, otherwise there's not a lot you can do. You can create test cases to figure out which situations trigger the bug so that you can avoid it, but that's about it. I ran into 2 pretty obscure bugs in IE lately. One of them was when you have a Flash movie inside of a frame, and you send out a post request from that Flash movie, IE will strip the content-type header from the request, which will cause problems on the server because it won't automatically parse the request as form data and make it available to the script (i.e., it won't auto-populate $_POST or Request.Form). The other bug is sort of similar, if you have a Flash movie inside of a frame and are using IE 7 or 8 (6 works), and you have Microsoft Office installed, and you send out a request from the Flash movie to open in a new window, and the response from the request is a document that would be opened in Office, if all of those conditions are true the window where you would open/save the document immediately closes, it doesn't stay open to let you save the document. That was a fun bug to work around. So you can spend time trying to figure out why IE does what it does, or you can just try to figure out what triggers the bug and work around it. It's usually not productive to figure out the why as long as you know the how.

[dsonesuk]

good! can you tell me how to setattribute to run in ie for thisy.setAttribute('onmouseover', 'trOver(event)');y.setAttribute('onmouseout', 'trOut(event)');

[justsomeguy]

Are you trying to set an attribute value or attach an event listener? You shouldn't be using setAttribute to attach a listener. I would give an example about how to do that, but something tells me you're just going to respond and be cocky, abusive, or otherwise argumentative (i.e., just like you've been since day 1). You don't need me to tell you how to do this stuff, there are quite a few examples online. Maybe start here:http://www.howtocreate.co.uk/tutorials/javascript/domeventsLeave the attitude at home, no one cares.

[Ingolme]

good! can you tell me how to setattribute to run in ie for thisy.setAttribute('onmouseover', 'trOver(event)');y.setAttribute('onmouseout', 'trOut(event)');

I believe that event attributes added after the page has loaded don't trigger events in Internet Explorer.I'd do something more like this:

if(window.addEventListener) {  y[i].addEventListener('mouseover',trOver,false);  y[i].addEventListener('mouseout',trOut,false);} else if(window.attachEvent) {  y[i].attachEvent('onmouseover',trOver);  y[i].attachEvent('onmouseout',trOut);} else {  y[i].onmouseover = trOver;  y[i].onmouseout = trOut;}

***[edit: I didn't see justsomeguy's reply sooner]

[dsonesuk]

whoa, whoa old man! all l wanted, was an example on how to set a setattribute for IE for How Do I Highlight A Line?, i've looked at w3schools example, and yes it worked for IE7 but not IE6. i then looked for solutions on the internet, and most say its not supported and the only way was to use y.onmouseover = function() { trOver(event); } y.onmouseout = function() { trOut(event); }which works in both IE6&7.You stated "I've used setAttribute extensively with IE, it works fine in versions 6 through 8" i just want to know how you did this for me (cuz i really want to know), djp, and anyone else who wants to setattributes for IE and finding it differcult like i did.you could even supply a working solution for the this post, and 'highlight a line' post i mentioned.Thanks in advance

[justsomeguy]

You don't understand the problem - you're trying to assign an event handler, but you're trying to use setAttribute to do it. setAttribute is not the correct way to assign an event handler. The example Ingolme posted is the correct way to assign an event handler. setAttribute is for setting attribute values, not assigning event handlers. When I've used setAttribute I've used it to set attribute values. An event handler is not the same thing as an attribute value, an event is not the same thing as an attribute. If you want an example from me, here's a function that's part of an application that works in all versions of IE, it sets attribute values, assigns event handlers, and sets content:

function edit_change_request(el, id){  if (edit_mode)  {	alert("Only one edit is allowed at a time.");	return;  }  if (!is_mgr)  {	alert("Only managers can edit change requests.");	return;  }  edit_mode = true;  edit_id = id;  var comment_text = "";  for (var i = 0; i < comments.length; i++)  {	if (comments[i].id == id)	{	  comment_text = comments[i].comment;	  break;	}  }    var td = el.parentNode;  removeChildren(td);  var e = ce('textarea');  e.setAttribute("id", "edit_request");  e.setAttribute("rows", 3);  e.setAttribute("cols", 40);  e.setAttribute("class", "standard_input");  e.setAttribute("className", "standard_input");  e.innerHTML = comment_text;    td.appendChild(e);  td.appendChild(ce('br'));  e = ce('input');  e.setAttribute("type", "submit");  e.setAttribute("value", "Save");  e.setAttribute("class", "standard_button");  e.setAttribute("className", "standard_button");  e.onclick = update_change_request;    td.appendChild(e);}