CreateElement en IE

[ZpAz]

Ik ben bezig om een 'systeem' te maken voor -----------------, het gaat om een 'uitbreidbaar' formulier.

Zodat je kan 'invullen' wat je eet en hoeveel enzovoort.
Dit wordt allemaal uit een database gehaald, en in een list gezet.

Als je bijvoorbeeld 'brood' aanklikt (onChange) dan komt via ajax allemaal beleg in het lijst er naast.
Daarna kan je een aantal kiezen en moet er berekend worden of je voldoende eet enz.

Als je bijvoorbeeld ook nog iets anders eet (crackers ofzo) kan je op de 'voeg toe' knop drukken zodat er een nieuwe TR komt waarin je het nieuwe dan kan kiezen.

Zodat je dus een uitgebreid formulier kan maken, waar je zelf dingen kan toevoegen en verwijderen.

Dit doe ik nu allemaal via CreateElement en appendChild.

Er wordt ook een hiddenvield bijgehouden met het aantal 'tr's' zodat je later serverside makkelijk alle nieuwgemaakte elementen via een loopje op kan halen.

-----------------
Nu komt het probleem. Het hele idee werkt helemaal in FireFox, maar in Internet Explorer verdwijnt alleen mijn 'voeg toe' knop, maar er komt geen nieuwe rij bij.

Hoe kan ik dit oplossen?

--------------------------- is de betreffende pagina. De javascript die ik er bij gebruik is:

------------------------------

[ Voor 7% gewijzigd door ZpAz op 03-01-2007 13:10 ]

[StevenK]

Ik weet niet wat die pagina doet, maar als ik op 'voeg toe' klik, dan krijg ik een google bar error en klapt m'n IE eruit.

Als ik 't goed zie, maar je in je createnext een TR aan, met als ID het ID wat je meegeeft.

edit: dat zie ik verkeerd.

JavaScript:

function createnext(id) {
if (id == maxid) {
var title = document.getElementById('title').innerHTML;
var varselect = document.getElementById(1).innerHTML;
var aantalselect = document.getElementById('aantal' + 1).innerHTML;         
maxid++; //tellen
id++;
//nieuwe objecten maken (nieuwe tr)
var newTR = document.createElement('tr');
newTR.id = id;

neemt niet weg dat ik 't sloppy vind dat je die TR als id een getal geeft, want

JavaScript:

SelectVar.id = id;

Hier krijgt die var dezelfde ID als je TR. Dat gaat je browser waarschijnlijk niet helemaal snappen.

[ Voor 54% gewijzigd door StevenK op 26-12-2006 14:01 ]

[ZpAz]

Okee, dat heb ik nu veranderd, ik heb de id variable TheID genoemd. Maar ik heb nog steeds hetzelfde probleem in IE.

[StevenK]

ZpAz schreef op dinsdag 26 december 2006 @ 14:16:
Okee, dat heb ik nu veranderd, ik heb de id variable TheID genoemd. Maar ik heb nog steeds hetzelfde probleem in IE.

dump dan eens de innerHTML van je newTR voor:

JavaScript:

//alles toevoegen
document.getElementById('table').appendChild(newTR);

Verder zou ik deze hele exercitie met een cloneNode doen.

[mrFoce]

offtopic:
http://www.google.co.uk/s...n&q=weetwatikeet.nl&meta=

Phisher?

[ Voor 13% gewijzigd door mrFoce op 26-12-2006 14:28 ]

[StevenK]

En ik heb je probleem ook gevonden:

Je hangt die newTR direct onder je table, maar die moet onder je tbody hangen.

In dit overzicht zie je dat je nieuwe <tr> op het verkeerde niveau in je DOM hangt en daarom niet gerenderd wordt.
Je kunt dus beter zorgen dat je eerste <tr> een id heeft en dan

JavaScript:

//alles toevoegen
var table=getElementById('tr1').parentNode.
table.appendChild(newTR);

[ Voor 22% gewijzigd door StevenK op 26-12-2006 14:39 ]

[ZpAz]

StevenK schreef op dinsdag 26 december 2006 @ 14:36:
En ik heb je probleem ook gevonden:

Je hangt die newTR direct onder je table, maar die moet onder je tbody hangen.
[afbeelding]
In dit overzicht zie je dat je nieuwe <tr> op het verkeerde niveau in je DOM hangt en daarom niet gerenderd wordt.
Je kunt dus beter zorgen dat je eerste <tr> een id heeft en dan

JavaScript:

//alles toevoegen
var table=getElementById('tr1').parentNode.
table.appendChild(newTR);

Als ik jou stukje code er in plaats krijg ik de volgende error:



--

Ben ik iets vergeten?

--

Welk programma gebruik je eigenlijk om dat te bekijken? (waarmee je je plaatje hebt gemaakt.) Lijkt me wel een handig programma..

[StevenK]

ZpAz schreef op dinsdag 26 december 2006 @ 14:53:
Ben ik iets vergeten?

Ja: je hebt niet op syntax gecontroleerd; er staat een typo achter parentNode. Die punt moet een puntkomma zijn.

Welk programma gebruik je eigenlijk om dat te bekijken? (waarmee je je plaatje hebt gemaakt.) Lijkt me wel een handig programma..

Dat was IEDomInspector (een trial), nu heb ik net IEDocMon, een freewaretool, geinstalleerd.

[ZpAz]

StevenK schreef op dinsdag 26 december 2006 @ 15:00:
[...]

Ja: je hebt niet op syntax gecontroleerd; er staat een typo achter parentNode. Die punt moet een puntkomma zijn.

[...]

Dat was IEDomInspector (een trial), nu heb ik net IEDocMon, een freewaretool, geinstalleerd.

Dom van mij

Hij voegt het nu wel toe

Maar de nieuwe lists zijn leeg in IE?

[StevenK]

Ik denk dat we nu bij het punt aankomen dat je toch iets meer zelf moet debuggen.

Daarbij zou je kunnen denken aan het dumpen van de innerHMTL van beide objecten.

[ZpAz]

dus de options met appendChild toevoegen?

[StevenK]

ZpAz schreef op dinsdag 26 december 2006 @ 17:45:
dus de options met appendChild toevoegen?

Met 'dumpen' bedoel ik 'weergeven', dus bijvoorbeeld

JavaScript:

alert (document.getElementById('1').innerHTML);
alert (document.getElementById('2').innerHTML);

[funkwurm]

Over dynamisch <select> boxes maken:

http://www.quirksmode.org/js/options.html

Bekijk zijn site uberhaupt eens, zinnige informatie voor je staat ook alhier:

http://www.quirksmode.org/dom/w3c_html.html

[crisp]

StevenK schreef op dinsdag 26 december 2006 @ 13:56:
[...]
neemt niet weg dat ik 't sloppy vind dat je die TR als id een getal geeft

Dat is niet alleen sloppy maar gewoonweg invalid; een id-attribuut mag niet met een cijfer beginnen...

[ZpAz]

funkwurm schreef op dinsdag 26 december 2006 @ 18:13:
Over dynamisch <select> boxes maken:

http://www.quirksmode.org/js/options.html

Bekijk zijn site uberhaupt eens, zinnige informatie voor je staat ook alhier:

http://www.quirksmode.org/dom/w3c_html.html

Ik heb die site bekeken is het is zeker een zeer informatiefe site, zeker dit gedeelte http://www.quirksmode.org/dom/domform.html

Met cloneNode kan je makkelijk complete formulieren clonen.

Ik pak het nu ook anders aan. Ik genereer eerst serverside een tabel. Deze zet ik op 'display:none' . Zodat hij niet te zien is. Dan 'kloon' ik de tr die er in zit. Dat lukt allemaal prima.

Daaronder is een tabel met formulier waar ik de gekloonde objecten in wil zetten.
Maar het de gekloonde tr's worden buiten de tabbel neergezet. Ik dacht zelf dat het hier aan lag.
Het ID van de tabel is 'InsertHere'

Dus ik wou de tr's toevoegen via:

code:

        var InsertPoint = document.getElementById('InsertHere');
        InsertPoint.parentNode.insertBefore(Clone,InsertPoint);

Maar nu komt het er dus boven te staan. (Omdat ik de parrent pak van de tabel.) als ik het verander in

code:

        var InsertPoint = document.getElementById('InsertHere');
        InsertPoint.childNode.insertBefore(Clone,InsertPoint);

Krijg ik de error van dat die niet bestaat.

code:

        var InsertPoint = document.getElementById('InsertHere');
        InsertPoint[1].insertBefore(Clone,InsertPoint);

werkt ook niet.

Hoe moet het wel?

Als je de DOM tree bekijkt zie je dat hij ze er boven plaatst:
http://zpaz.strictstudio.nl/clone.jpg

Het formulier met de code is te vinden op:
http://zpaz.strictstudio.nl/test.html

[crisp]

ZpAz schreef op woensdag 27 december 2006 @ 14:44:
[...]
Hoe moet het wel?

InsertPoint.appendChild ?

Note overigens dat een table altijd een impliciete TBODY child heeft en dat een TABLE-element zonder TR en TD/TH invalid is. Ook dienen ID-attributen uniek te zijn binnen een document.

Dat clonen is leuk maar ik denk dat je misschien beter eens naar innerHTML kan kijken

[StevenK]

crisp schreef op woensdag 27 december 2006 @ 14:57:
Dat clonen is leuk maar ik denk dat je misschien beter eens naar innerHTML kan kijken

Dat is juist waar hij mee begon

[ZpAz]

crisp schreef op woensdag 27 december 2006 @ 14:57:
[...]

InsertPoint.appendChild ?

Als ik appendChild gebruik raak ik mijn Tbody kwijt..

[crisp]

ZpAz schreef op woensdag 27 december 2006 @ 15:56:
[...]


Als ik appendChild gebruik raak ik mijn Tbody kwijt..

Je hebt niet eens een TBODY omdat je ueberhaupt al met invalid markup begint (<table></table>)

[ZpAz]

Hoe bedoel je? Ik heb gewoon een <table> </table> in mijn code waar het in moet komen?

code:

<table style="border:1px;" id="InsertHere">
</table>