Toon posts:

cloneNode en replaceChild lukt niet

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik ben bezig met een site die met ene grote database werkt. Wanneer je gaat zoeken in deze database heb je wel 4 invulvelden (<select>) waar je een stad kunt aanklikken. Deze hebben allemaal dezelfde waarde; meer dan 2200 steden in Nederland.

Nu wil ik graag om bandbreedte te sparen, slechts 1 zo'n dropdown zijn waardes geven. De rest van de dropdowns maak ik enkel aan zonder waarde, maar in plaats daarvan eronder een JavaScript die de elementen uit een vantevore gedefinieerd select-element kopieert. Dit scheelt (hoop ik) tijd met ophalen.

Dit javascript ziet er als volgt uit:

code:
1
2
3
4
5
6
7
8
<script type="text/javascript">
    newObject = document.getElementById("<?=$copynaam?>").cloneNode(true);
    oldObject = document.getElementById("<?=$naam?>");
    newObject.name="<?=$naam?>";
    alert(oldObject.length);
    alert(newObject.length);
    document.replaceChild(newObject, oldObject);
</script>


Uiteraard wordt $copynaam de naam van het te kopieren element en $naam de naam van het lege element wat nog waardes moet krijgen.

Met cloneNode heb ik succesvol een clone gemaakt want d.m.v. de alerts() kan ik zien dat de lengte van het nieuwe element 2231 is en de lengte van het oude natuurlijk 0.

Toch, krijg ik van mijn browser een error en wel bij de regel van de replaceChild. De fout luidt 'Ongeldig Argument'. Kan iemand me vertellen wat er fout is aan deze regel?

  • Dark Blue
  • Registratie: Februari 2001
  • Laatst online: 23-08 22:18

Dark Blue

Compositionista!

Alpenmeisje

Misschien kan dit je helpen (al weet je er zelf natuurlijk al veel van anders zou je niet met replaceChild enzo werken)
http://www.devguru.com/Te...ef/node_replaceChild.html

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs


Verwijderd

Topicstarter
De syntax ziet er op die site inderdaad precies hetzelfde uit als in de manuals die ik heb doorgelezen, namelijk document.replaceChild(newNode, oldNode);

edit:
Mept zijn typiste

  • André
  • Registratie: Maart 2002
  • Laatst online: 01-09 14:07

André

Analytics dude

Met cloneNode heb ik succesvol een clone gemaakt want d.m.v. de alerts() kan ik zien dat de lengte van het nieuwe element 2231 is en de lengte van het oude natuurlijk 0.
Als je een cloneNode doet moet de length van beide toch 2231 zijn :?

Waarschijnlijk gaat het fout bij de replaceChild omdat oldObject een length van 0 heeft.

Verwijderd

Topicstarter
Maar ik kan niet zomaar een element invoegen wat meer children heeft dan het oude element? Lijkt mij ietwat vreemd als dat niet zou kunnen...

Verwijderd

Volgens mij gaat dit ook niet lukken op jouw manier.
The duplicate node returned by cloneNode() has no parent. Cloning a node copies all of its attributes and their values but does not copy any of the text unless it is a deep clone.
Misschien werkt het zo wel, door de parameter 'deep' mee te geven.
HTML:
1
dupNode = element.cloneNode(deep)


Ben hier zelf echter nog niet mee bezig dus is het een gok. (heb je trouwens iets online staan, dat debugt wat makkelijker dan zo'n fantastische standaard IE warning)

Verwijderd

Topicstarter
Doordat ik de value true meegeef, worden alle children standaard meegekopieerd inclusief hun waardes. De clone is dan ook een goeie clone. Alleen mag ik het element inclusief children dus kennelijk niet over het element zonder children heengooien.

Helaas is dit een intern project wat ik niet online mag zetten omdat dat zo in mijn contract staat :(

Verwijderd

Topicstarter
Wanneer ik als value false meegeef, kopieer ik alleen het element en niet zijn kinderen. Beide hebben dan ook een length van 0.

En nog steeds krijg ik dezelfde foutmelding

Verwijderd

Verwijderd schreef op 04 september 2002 @ 14:33:
Helaas is dit een intern project wat ik niet online mag zetten omdat dat zo in mijn contract staat :(
dat is jammer, maar is te begrijpen.

Kijk anders eens hier na, misschien heb je er wat aan:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function repl()
{
newDiv = document.createElement('div')
newDiv.id = 'new'
docBody = document.getElementsByTagName('body').item(0)
oldDiv = document.getElementById('old')
docBody.replaceChild(newDiv,oldDiv)
}
</script>
<style type="text/css">
div {
    cursor: pointer;
}
#new {
    border: 2px #ff0000 dotted;
    left: 20px;
    top: 20px;
    width: 250px;
    height: 250px;
    position: absolute;
}
#old {
    border: 2px #ff0000 dotted;
    left: 73px;
    top: 36px;
    width: 163px;
    height: 146px;
    border: 1px #000000 solid;
    position: absolute;
}
</style>
</head>

<body>

<div id="old" onClick="repl();"></div>
</body>
</html>


Volgens mij mis je een 'docBody'

[ Voor 0% gewijzigd door Verwijderd op 04-09-2002 14:47 . Reden: typo's ]


Verwijderd

Topicstarter
Ik heb aan de hand van het voorbeeld geprobeert om het id ook te wijzigen en om beide te wijzigen. Voor de rest werkt mijn script hetzelfde, maar dan niet....

edit:

Docbody heb ik ook even toegevoegd om uit te proberen maar werkt nog steeds niet

Verwijderd

docBody kan in principe alles zijn, stel dat ik mijn divje in een span had genest, dan wordt de docBody dus automatisch een 'span' i.p.v. wat ik nu heb als docBody . Dit zou bij jou dus ook het geval kunnen zijn, als het element wat jij wilt vervangen niet direct in de body staat en niet het eerste element is wat je via de DOM structuur tegenkomt.

Verwijderd

Topicstarter
Maar dan zou ik dus eigenlijk de replaceElement functie moeten uitvoeren op de parent van het oude object.

Nou klinkt mijn ervaring groots met deze functies, maar dat is het niet; hoe bepaal ik de parent van een object?

Verwijderd

Node.parentNode, dus bijvoorbeeld:

oldObject.parentNode.replaceChild(newObject, oldObject);

Dit zou moeten werken.

Je zou er trouwens ook voor kunnen kiezen om met javascript je hele pagina te schrijven, met behulp van document.write. In dit geval zie ik de meerwaarde niet echt van het gebruik van DOM scripting.

Verwijderd

nee niet het parentelement maar de childnodes van het parentelement, welk element dat geef je aan in;
docBody = document.getElementsByTagName('body').item(0)

0 staat voor de eerste childnode
1 voor de tweede
2 etc etc etc

Dus welke childnode jij moet vervangen is moeilijk te bepalen vanaf hier :) Je zal moeten uitvinden op welke plaats het zich bevind in de DOM tree en dan het juiste nummer invullen, het is eigenlijk vrij simpel. Download Mozilla, daar zit een mooie DOM inspector bij, dan is het heel simpel uit te vogelen, er is ook zoiets van Microsoft die doet hetzelfde.
Pagina: 1