PDA

View Full Version : IE Workarounds for DOMs setAttribute()



sniperman
07-31-2009, 11:19 AM
Just a quick question. I have started to work with the DOM lately and as with all other scripting, encountered "this command is not supported" errors by good 'ol Internet Explorer...



var objInput = document.createElement("input");
document.body.appendChild(objInput);
var form = document.getElementsByTagName("input");
form.item(0).setAttribute("type", "button");
form.item(0).setAttribute("onclick", "appendList()");
form.item(0).setAttribute("value", "press to append");


the colored portion is the code that generates the error. I know there are three methods to call the same code.


form[0].setAttribute("type", "button");


form.item(0).type = "button";


form[0].type = "button";

but none of them seem to be supported by IE. Does anyone know the workarounds??

vwphillips
07-31-2009, 12:50 PM
you can not change the type of an input once it is part of the DOM

if form.item(0) is objInput will work but will still have IE problems if used with forms


var objInput = document.createElement("input");
objInput.setAttribute("type", "button");
objInput.onclick=function(){ appendList(); }
objInput.setAttribute("value", "press to append");
document.body.appendChild(objInput);



if you acually want to change the type replace the input with a newly constructed input

BTW the XBrowser function I use to construct form inputs


function zxcFormField(tag,nme,type){
var el;
try {
el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
}
catch (e){
el=document.createElement(tag);
if (type) el.type=type;
el.name=nme;
}
return el;
}

sniperman
07-31-2009, 01:53 PM
thanks for the reply


you can not change the type of an input once it is part of the DOM

I actually use a blank template with an onload event in the body tag to call the script so there are no static elements in the BODY. I am creating all the elements on the fly. Is the method correct to create an element (<input> in this case) and set its attributes before I append the form tag to the body?? Seems not for IE.

ps... the input button doesn't come in a form tag, it's flying solo.

btw... that's a great code for automation.


el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');

Is that ? there supposed to be a + plus

vwphillips
07-31-2009, 02:13 PM
Is that ? there supposed to be a + plus

No, the code has been tested, the ? is a conditional.

rainarts
07-31-2009, 02:18 PM
And also here's another way to work around it:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Free Live Help!</title>
<script type="text/javascript">
<!--
var domEntry = function() {

var ie = 1;
var form;
var input;
var label;
var div = document.getElementById("main"); // will served as the place holder of the created elements ( form/input ).

(( !div && ( ie = document.all.main )) ? div = ie : ie = 0 );

/*
- If the browser does understand the
getElementById method,
then variable ( div ) will
preserved its first declared
value, otherwise it will be
set to hold the document.all
method, which is best
supported in all modes of IE browsers.
*/
if ( "createElement" in document ) { // Check if it does support the createElement in the document. continue >>>

/* OPTIONAL ATTRIBUTES */
form = document.createElement("form"); // Form Object
form.action = String( "http://yourDomain/process/fieldentries" ); // You must replace this with a valid action URL.
form.id = "form1"; // Specify the form id.
form.method = "post"; // Specify which method to be used upon form submission, it's eithe get/post.
label = document.createElement("label"); // Creating label tag.
textLabel = document.createTextNode("Dynamic Field: "); // Creating textual display for the label tag.
input = document.createElement("input"); // Input Element
input.type = "text"; // Specify which type of input element will be used before injection.
input.id = "text1"; // Specify its id.
input.name = "text1"; // Specify its name.
input.value = ""; // Specify its value.
input.size = 30; // Specify its width;

if ( ie ) { // Best method when injecting ELEMENT in IE Mode.
label.insertAdjacentElement( "afterBEGIN", input );
label.insertAdjacentText( "afterBEGIN", "Dynamic Field:" );
form.insertAdjacentElement( "beforeEND", label );
div.insertAdjacentElement( "beforeEND", form );
return;
} label.appendChild( textLabel );
label.appendChild( input );
form.appendChild( label );
div.appendChild( form );
return;
} alert("Please update your browser with its latest patch.", "unsupported feature");
return false;
};

onload = domEntry;
// -->
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

sniperman
07-31-2009, 02:50 PM
thanks rainarts. i wasn't aware of the document.all failsafe for IE browsers. Should prove very useful when interpreted into my codes.

vwphillips
07-31-2009, 03:24 PM
In case others read this thread must point out

1)

if ( ie ) { // Best method when injecting ELEMENT in IE Mode.
label.insertAdjacentElement( "afterBEGIN", input );
label.insertAdjacentText( "afterBEGIN", "Dynamic Field:" );
form.insertAdjacentElement( "beforeEND", label );
div.insertAdjacentElement( "beforeEND", form );
return;
}

while using IEs own methods they have no advantage over standard DOM methods,
(I'm not sure that IE8 still supports them)

2) the code missuses the Lable Tag

3) form elements constructed in this way cannot be submitted in IE (I'm not sure if IE8 has fixed this),
they may using the function I posted in Post #1

4) The element type cannot be changed once it is part of the DOM.

rainarts
07-31-2009, 04:10 PM
@ vic,

IE6- got some minor stability problem when using document.createElement() under this modes. As you can see in my first statement, i have encapsulated the following terms,

(( !div ( ie = document.all ) ? div = ie : ie = 0 )
meaning it will only work around lower versions' of IE6- that does not understand the getElementById method, so IE7+ will treat the second stance of my statement that uses the appendChild procedure.

IE7+ provides full support for the getElementById, so it will just ignore the 1st line of my statement where i implemented the use of the old insertAdjacent(TYPE), which is meant for the older type of IE.

Try to test it before you make any comments', and you are not the only person here who understand this terms. So dont act that you almost know everything about this language...

sniperman
08-04-2009, 12:30 PM
ok, just a quick question. rainart with your code combined with mine i've been able to produce a DOM-only webpage, which is the aim of this exercise to have no tags within the BODY tags.

however, i need to call a function so once this part of the page is displayed, the DOM portion that created an input button also passes an onclick event handler to the function.

I am sure DOM style does not have elements for event handlers, so how would i implement a javascript call?


var input;
var label;

label = document.createElement("label"); // Creating label tag.
textLabel = document.createTextNode("Dynamic Field: "); // Creating textual display for the label tag.
input = document.createElement("input"); // Input Element
input.type = "button"; // Specify which type of input element will be used before injection.
input.id = "button"; // Specify its id.
input.name = "text1"; // Specify its name.
input.onclick = "javascript:appendList()";
input.value = "press to append"; // Specify its value.
input.size = 30; // Specify its width;

label.appendChild( textLabel );
label.appendChild( input );
document.body.appendChild( label );

The portion highlighted red is my basic aim. I can already call the function as such...


document.getElementById("button").onclick = appendList();

but that line of code automatically calls the second portion. I need an onclick handler via DOM methods alone.

rainarts
08-05-2009, 01:40 AM
Hi sniperman,

you can simulate those clicks by assigning anonymous function directly on its line.
e.g.

var someVar = "div";
input.onclick = ( function() {
appendList( someVar ); // Do this type of call if you need to pass some arguments over the function being called
} );

but if there's no arguments' involved, then simply apply this format:

input.onclick = appendList;

and you will be able to make those call...