[JS] IE > setAttribute - Softwareontwikkeling

woensdag 18 oktober 2006 21:47

Acties:

Topicstarter

Zou iemand mij kunnen vertellen waarom de volgende functie niet werkt onder Internet Explorer (FF wel)?
De attributen worden niet toegewezen aan het element. Ik zit er al een aantal uurtjes mee te kloten en Google is vandaag ook niet erg vriendelijk....

JavaScript:

function AddImageField()
{
         var input_element = document.createElement('INPUT');
        var divbox = document.getElementById('imagefield');
        var text = "Klik op 'Browse' om een foto of een plaatje te selecteren.<br /><i>Let op: alleen JPG!</i>";
        
        element = divbox.appendChild(input_element);
        element.setAttribute('type', 'file');
        element.setAttribute('name', 'image[]');
        element.setAttribute('class', 'upload_image');

        document.getElementById('imagefield_label').innerHTML = text;
}

Bedankt

woensdag 18 oktober 2006 21:50

Acties:

orf

moeten je attributen niet aan var input_element komen te hangen?

input_element.setAttribute();

woensdag 18 oktober 2006 21:54

Acties:

roan

Topicstarter

orf schreef op woensdag 18 oktober 2006 @ 21:50:
moeten je attributen niet aan var input_element komen te hangen?

input_element.setAttribute();

Verandert in IE & FF beide niets (wel maf overigens).

woensdag 18 oktober 2006 21:56

Acties:

orf

Wat gebeurt er als je de appendChild onder de setAttributes zet?

woensdag 18 oktober 2006 21:58

Acties:

roan

Topicstarter

orf schreef op woensdag 18 oktober 2006 @ 21:56:
Wat gebeurt er als je de appendChild onder de setAttributes zet?

Wat moet ik me daar bij voorstellen? Ik ben niet echt een Javascript held...

Nog ff voor de duidelijkheid, het werkt onder Firefox. De IE script debugger geeft hier de foutmelding:

JavaScript:

1	element.setAttribute('type', 'file');

[ Voor 25% gewijzigd door roan op 18-10-2006 22:00 ]

woensdag 18 oktober 2006 22:03

Acties:

crisp

Devver

Pixelated

Probeer het eens op de DOM level 0 manier:

JavaScript:

1
2
3

element.type = 'file';
element.name = 'image[]';
element.className = 'upload_image';

Intentionally left blank

woensdag 18 oktober 2006 22:05

Acties:

orf

Dit werkt hier prima:

JavaScript:

<html>
<body>
<div id="box"></div>

<script type="text/javascript">

    var input_element = document.createElement('input');
    input_element.setAttribute('type', 'file');
    input_element.setAttribute('name', 'naam');
    document.getElementById('box').appendChild(input_element);
    alert('xx');
</script>
</body>
</html>

woensdag 18 oktober 2006 22:05

Acties:

Clay

cookie erbij?

Als je de type zet voordat je de input append doet IE het wel. De class was altijd al irritant om dynamisch aan een element te hangen, het meest betrouwbare werkt dat altijd nog met de .className property.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 18 oktober 2006 22:07

Acties:

crisp

Devver

Pixelated

Clay schreef op woensdag 18 oktober 2006 @ 22:05:
Als je de type zet voordat je de input append doet IE het wel. De class was altijd al irritant om dynamisch aan een element te hangen, het meest betrouwbare werkt dat altijd nog met de .className property.

Niet eens gezien dat hij eerst een append deed en dan pas properties ging aanpassen; da's sowieso performance-technisch ook niet handig. En inderdaad: in IE kan je niet dynamisch de type van een form-control aanpassen als hij eenmaal in de DOM-tree hangt

In nog oudere IE-versies moest je zelfs nog dit doen:

JavaScript:

1	var input = document.createElement('<input type="file">');

[ Voor 10% gewijzigd door crisp op 18-10-2006 22:09 ]

Intentionally left blank

woensdag 18 oktober 2006 22:10

Acties:

user109731

swahalla schreef op woensdag 18 oktober 2006 @ 21:54:
[...]
Verandert in IE & FF beide niets (wel maf overigens).

Niet zo heel maf als je bedenkt dat appendChild() de toegevoegde node returnt, en dat is idd dezelfde als input_element...

@hierboven: oef, das ranzig zo'n complete tag drin...

[ Voor 0% gewijzigd door user109731 op 18-10-2006 22:46 . Reden: typo ]

woensdag 18 oktober 2006 22:14

Acties:

roan

Topicstarter

orf schreef op woensdag 18 oktober 2006 @ 22:05:
Dit werkt hier prima:

JavaScript:

<html>
<body>
<div id="box"></div>

<script type="text/javascript">

    var input_element = document.createElement('input');
    input_element.setAttribute('type', 'file');
    input_element.setAttribute('name', 'naam');
    document.getElementById('box').appendChild(input_element);
    alert('xx');
</script>
</body>
</html>

Ah, op die manier eronder

Het werkt nu goed, bedankt.

Is het trouwens niet mogelijk om het attribuut class toe te kennen aan dit element in IE ? Dat is namelijk het enige wat niet werkt.
Ik ga ff opzoek naar de .classname property.

In ieder geval bedankt voor de moeite, denk dat het verder wel moet lukken.

Wat een snelheid @ hieronder, nogmaals, bedankt

[ Voor 11% gewijzigd door roan op 18-10-2006 22:17 ]

woensdag 18 oktober 2006 22:15

Acties:

crisp

Devver

Pixelated

swahalla schreef op woensdag 18 oktober 2006 @ 22:14:
[...]

Ah, op die manier eronder Het werkt nu goed, bedankt.

Is het trouwens niet mogelijk om het attribuut class toe te kennen aan dit element in IE ? Dat is namelijk het enige wat niet werkt.

JavaScript:

element.className = 'foo'; // crosssbrowser, DOM level 0

//of
element.setAttribute('className', 'foo'); // IE
element.setAttribute('class', 'foo'); // echte browsers

[ Voor 3% gewijzigd door crisp op 18-10-2006 22:16 ]

Intentionally left blank