[js] IE en appendChild ... - Softwareontwikkeling

maandag 11 februari 2008 21:17

Acties:

Verwijderd

Topicstarter

Ik heb al een aantal topics over deze merkwaardige combi gelezen, maar tot nu toe lukt het mij niet om mijn eigen code werkend te krijgen.
Het is een beetje onzinnig stukje code, maar het gaat om het principe: met appendChild een element aan het form toevoegen en vervolgens een function daaraan toekennen die op een change getriggerd moet gaan worden.
In FF geen probleem, in IE wel.
Wie ziet wat ik niet zie?

<html>
<head>
<script language="javascript" type="text/javascript">

function new_input()
{
var x = document.getElementById('new');
var p = document.createElement('input');
p.setAttribute('type', 'text');
p.setAttribute('name', 'txt_price');
p.setAttribute('size', '10');
p.onchange = function(){check_input2();};
x.appendChild(p);
}

function check_input2()
{
var txt2 = document.getElementsByName('txt_price');
for(var i=0;i<txt2.length;i++)
{
if (txt2[i].value == "0")
{
new_input();
} else
{
alert("geen nul");
}

}
}

function check_input()
{

var txt = document.getElementsByName('txt_input');
for(var i=0;i<txt.length;i++)
{
if (txt[i].value == "0")
{
new_input();
} else
{
alert("geen nul");
}

}
}

</script>
</head>

<body>

<form name=frm_main>
<input type="text" name="txt_input" size="25" onchange="javascript:check_input();">
<div id="new"></div>

</form>
</body>
</html>

maandag 11 februari 2008 21:21

Acties:

TERW_DAN

Met een hamer past alles.

Voer eerst de appendChild eens uit en voeg dan pas de attributen eraan toe. Dat wil nog wel eens helpen.

maandag 11 februari 2008 21:22

Acties:

dominic

will code for food

Wat ik vaak merk is dat IE nogal vaag doet bij het zetten van attributen voordat het aangemaakte object opgenomen is in de DOM en gerendered is.

Probeer het eens in een andere volgorde:

code:

var x = document.getElementById('new');
var p = document.createElement('input');
x.appendChild(p);

p.setAttribute('type', 'text');
p.setAttribute('name', 'txt_price');
p.setAttribute('size', '10');
p.onchange = function(){check_input2();};

Het is een gokje..

Download my music on SoundCloud

maandag 11 februari 2008 21:25

Acties:

Verwijderd

Topicstarter

Geprobeerd, maar helaas zonder resultaat ...
Andere suggesties?

maandag 11 februari 2008 21:29

Acties:

mux

99% efficient!

Niet een functie maar een string met de functie toekennen?

whatever.onchange = "javascript:function(){alert()}";

maandag 11 februari 2008 21:35

Acties:

rickmans

twittert

In IE kan je een eenmaal gecreeerde input niet meer aanpassen (dus het is niet meer mogelijk om attributen toe te voegen/wijzigen na creatie).

Don't mind Rick

maandag 11 februari 2008 21:36

Acties:

dominic

will code for food

rickmans schreef op maandag 11 februari 2008 @ 21:35:
In IE kan je een eenmaal gecreeerde input niet meer aanpassen (dus het is niet meer mogelijk om attributen toe te voegen/wijzigen na creatie).

Dat gaat prima hoor.

.setAttribute maakt het attribuut nl. gewoon aan als ie nog niet bestaat.

[ Voor 12% gewijzigd door dominic op 11-02-2008 21:37 ]

Download my music on SoundCloud

maandag 11 februari 2008 21:38

Acties:

Wizz15

ssj3gohan schreef op maandag 11 februari 2008 @ 21:29:
Niet een functie maar een string met de functie toekennen?

whatever.onchange = "javascript:function(){alert()}";

Dat zou het probleem niet moeten zijn, de manier waarop hij de functie toekent is gewoon goed.

@TS:
Bij mij werkt trouwens alles gewoon in FF en IE6. Krijg je geen foutmelding oid? Ik zie op het eerste gezicht ook geen fouten in je code.

PSN: RikBruil | BFBC2 stats

maandag 11 februari 2008 21:41

Acties:

crisp

Devver

Pixelated

dominic schreef op maandag 11 februari 2008 @ 21:36:
[...]

Dat gaat prima hoor.

.setAttribute maakt het attribuut nl. gewoon aan als ie nog niet bestaat.

Nope, er is geen nette manier om in IE dynamisch een input-element met een name attribuut aan te maken. Dit is (naast innerHTML gebruiken) de enige manier:

JavaScript:

1	var p = document.createElement('<input name=txt_price>');

Intentionally left blank

maandag 11 februari 2008 21:43

Acties:

rickmans

twittert

dominic schreef op maandag 11 februari 2008 @ 21:36:
[...]

Dat gaat prima hoor.

.setAttribute maakt het attribuut nl. gewoon aan als ie nog niet bestaat.

laat ik het dan iets nuanceren:
Na creatie kan je niet de naam, het type of inline event handlers toevoegen.

Zie ook:
http://msdn2.microsoft.com/en-us/library/ms534700.aspx

As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.

en
http://webbugtrack.blogsp...ment-is-broken-in-ie.html
http://webbugtrack.blogsp...e-doesnt-always-work.html

Don't mind Rick

maandag 11 februari 2008 22:04

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op maandag 11 februari 2008 @ 21:53:
Ik krijg geen enkele foutmelding.
Er gebeurt (ogenschijnlijk) helemaal niets.

whatever.onchange = "javascript:function(){alert()}"; uitgeprobeerd. Ook zonder resultaat.

Voor de zekerheid de append weer in de oorspronkelijke volgorde.

Een eventhandler heeft een functie-referentie nodig, geen string, dus je code in je startpost was op dat punt correct (hoewel p.onchange = check_input2; netter is). Probleem is dat document.getElementsByName('txt_price'); geen referentie teruggeeft omdat IE een achterlijke DOM-implementatie heeft. Zie mijn eerdere post...

edit: die manier werkt inderdaad alleen in IE, dus een vorm van sniffing is noodzakelijk

[ Voor 6% gewijzigd door crisp op 11-02-2008 22:05 ]

Intentionally left blank

maandag 11 februari 2008 22:19

Acties:

Blaise

dus een vorm van sniffing is noodzakelijk

Ik heb het ooit zoals hieronder opgelost. Kan try/catch op deze manier leiden tot rariteiten?

JavaScript:

try { // IE
    secureCheckbox = document.createElement('<input name="foo" checked="checked">');
} catch(e) { // Other
    secureCheckbox = document.createElement('input');
    secureCheckbox.name = 'foo';
    secureCheckbox.checked = true;
}

secureCheckbox.type = 'checkbox';
secureCheckbox.value = 'true';

[ Voor 8% gewijzigd door Blaise op 11-02-2008 22:20 ]

maandag 11 februari 2008 22:46

Acties:

f.v.b

De volgende code werkt bij mij cross-browser (IE6/7 en Firefox):

JavaScript:

var elem1 = document.createElement("input");
elem1.name = 'elem1';
elem1.value = 'abcdefg';

var elem2 = document.createElement("textarea");
elem2.name = 'elem2';
elem2.value = 'hijklmn';

form.appendChild(elem1);
form.appendChild(elem2);

Don't erase all files?
[Yes] [No]

maandag 11 februari 2008 23:45

Acties:

crisp

Devver

Pixelated

Blaise schreef op maandag 11 februari 2008 @ 22:19:
[...]

Ik heb het ooit zoals hieronder opgelost. Kan try/catch op deze manier leiden tot rariteiten?
[...]

In principe niet, behalve dan een kleine performance-penalty voor browsers die het wel goed doen wat eigenlijk niet helemaal 'eerlijk' is

Ik gebruik zelf ook een try-catch meestal.

f.v.b schreef op maandag 11 februari 2008 @ 22:46:
De volgende code werkt bij mij cross-browser (IE6/7 en Firefox):

JavaScript:

var elem1 = document.createElement("input");
elem1.name = 'elem1';
elem1.value = 'abcdefg';

var elem2 = document.createElement("textarea");
elem2.name = 'elem2';
elem2.value = 'hijklmn';

form.appendChild(elem1);
form.appendChild(elem2);

Het 'werkt' in die zin dat je geen foutmeldingen krijgt, maar als je je formulier submit of een lookup doet op name dan vraag je je toch af waar ze gebleven zijn...

Intentionally left blank

dinsdag 12 februari 2008 03:37

Acties:

f.v.b

crisp schreef op maandag 11 februari 2008 @ 23:45:
Het 'werkt' in die zin dat je geen foutmeldingen krijgt, maar als je je formulier submit of een lookup doet op name dan vraag je je toch af waar ze gebleven zijn...

Nee hoor, de submit werkt ook... Ik zal de copy-paste even helemaal afmaken:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
    <script language="javascript" type="text/javascript">
    <!--
    
        var form = document.createElement("form");
        // form.action = "";
        // form.encoding = "multipart/form-data";
        // form.method = "post";
        form.method = "get";
        
        var elem1 = document.createElement("input");
        elem1.name = 'elem1';
        elem1.value = 'abcdefg';
        
        var elem2 = document.createElement("textarea");
        elem2.name = 'elem2';
        elem2.value = 'hijklmn';

        // submit knop is alleen nodig als gebruiker handmatig het formulier moet versturen
        var submit = document.createElement("input");
        submit.type = 'submit';
        
        form.appendChild(elem1);
        form.appendChild(elem2);
        form.appendChild(submit);
        
        document.getElementsByTagName('body')[0].appendChild(form);
        form.submit();
    
    // -->
    </script>
</body>
</html>

Bovenstaande pagina genereert in zowel IE7, IE6, Firefox en Safari (allemaal Windows) een mooie oneindige lus. Opera gaat niet in een oneindige lus, maar de URL wijzigt wel dus de eerste submit vindt plaats.

De 'post' versie lukt ook, die komt regelrecht uit mijn eigen code, maar de 'get' versie is natuurlijk wat eenvoudiger te controleren.

Als de form.submit() verwijderd wordt, dan kan het formulier ook handmatig door de gebruiker verstuurd worden. Ik heb zelf geen scenario's kunnen vinden waarin het niet werkt.

De ...('body')[0].appendChild(form) is wel cruciaal in bovenstaande code. Ik had deze natuurlijk liever overgeslagen, maar dan stopt het formulier in sommige browsers inderdaad met werken. Het formulier is vast met wat slimme CSS onzichtbaar te maken indien nodig.

Don't erase all files?
[Yes] [No]

dinsdag 12 februari 2008 10:08

Acties:

crisp

Devver

Pixelated

f.v.b schreef op dinsdag 12 februari 2008 @ 03:37:
[...]

Nee hoor, de submit werkt ook... Ik zal de copy-paste even helemaal afmaken:

Probeer dit eens:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
    <script type="text/javascript">
    
        var form = document.createElement("form");
        form.method = "get";
    form.onsubmit = function()
    {
        alert(this.elements['elem1']);
        alert(this.elements['elem2']);
    }
        
        var elem1 = document.createElement('input');
        elem1.name = 'elem1';
        elem1.value = 'abcdefg';
        
        var elem2 = document.createElement('textarea');
        elem2.name = 'elem2';
        elem2.value = 'hijklmn';

        var submit = document.createElement('input');
        submit.type = 'submit';
        
        form.appendChild(elem1);
        form.appendChild(elem2);
        form.appendChild(submit);
        
        document.getElementsByTagName('body')[0].appendChild(form);
    
    </script>
</body>
</html>

Intentionally left blank

dinsdag 12 februari 2008 10:57

Acties:

dominic

will code for food

crisp schreef op dinsdag 12 februari 2008 @ 10:08:
[...]

Probeer dit eens:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
    <script type="text/javascript">
    
        var form = document.createElement("form");
        form.method = "get";
    form.onsubmit = function()
    {
        alert(this.elements['elem1']);
        alert(this.elements['elem2']);
    }
        
        var elem1 = document.createElement('input');
        elem1.name = 'elem1';
        elem1.value = 'abcdefg';
        
        var elem2 = document.createElement('textarea');
        elem2.name = 'elem2';
        elem2.value = 'hijklmn';

        var submit = document.createElement('input');
        submit.type = 'submit';
        
        form.appendChild(elem1);
        form.appendChild(elem2);
        form.appendChild(submit);
        
        document.getElementsByTagName('body')[0].appendChild(form);
    
    </script>
</body>
</html>

document.getElementsByTagName('body')[0] ??

Als er meer dan één body tag in de HTML staat?

Download my music on SoundCloud

dinsdag 12 februari 2008 11:01

Acties:

crisp

Devver

Pixelated

dominic schreef op dinsdag 12 februari 2008 @ 10:57:
[...]

document.getElementsByTagName('body')[0] ??

Als er meer dan één body tag in de HTML staat?

Dat was gewoon c/p van f.v.b.

Intentionally left blank

dinsdag 12 februari 2008 11:13

Acties:

P.O. Box

in IE kun je toch: attachEvent gebruiken?

JavaScript:

1	obj.attachEvent('onchange', myfunc);

dinsdag 12 februari 2008 11:57

Acties:

crisp

Devver

Pixelated

Edwardvb schreef op dinsdag 12 februari 2008 @ 11:13:
in IE kun je toch: attachEvent gebruiken?
JavaScript:
1
obj.attachEvent('onchange', myfunc);

uhm, ja

Maar wat heeft dit te maken met het probleem van de topicstarter? (buiten het feit dat je IE's brakke event-model niet moet willen gebruiken)?

Intentionally left blank

dinsdag 12 februari 2008 12:14

Acties:

P.O. Box

crisp schreef op dinsdag 12 februari 2008 @ 11:57:
[...]

uhm, ja Maar wat heeft dit te maken met het probleem van de topicstarter? (buiten het feit dat je IE's brakke event-model niet moet willen gebruiken)?

oh... uit de topicstart werd mij niet duidelijk dat het probleem in de setAttribute functie zat... ik begreep uit de TS dat het probleem in de onchange zat... de latere reacties heb ik denk ik te snel doorgelezen om het wel goed door te krijgen... excusez...

dinsdag 12 februari 2008 21:28

Acties:

f.v.b

dominic schreef op dinsdag 12 februari 2008 @ 10:57:

document.getElementsByTagName('body')[0] ??

Als er meer dan één body tag in de HTML staat?

Dit was oorspronkelijk een document.getElementsByTagName('head')[0] die ik ergens vandaan gekopieerd heb. Voor de body kan je natuurlijk document.body gebruiken, maar voor het benaderen van de head heb ik nog niets simpelers kunnen vinden dan bovenstaande oplossing.

Maar even terug naar het probleem van topicstarter: Als ik de voorbeeldcode pagina laad in Firefox, en ik vul een nul in in het eerste veld, dan verschijnt er een tweede veld. Vul ik daar ook een nul in dan dan komt er weer een veld bij. Vanaf dat moment verdubbelt het aantal nieuwe invoervelden bij elke nul die ik invoer.

In IE werkt dit weliswaar anders (zeg maar niet), maar het doel van het script ontgaat me. Met een paar kleine wijzigingen is het script zo te maken dat elke nieuwe nul die je invult resulteert in een enkel nieuw leeg invoerveld. En dat script werkt dan hetzelfde in IE6 en IE7 en Firefox.

Don't erase all files?
[Yes] [No]