[dhtml] veld weg na innerHTML - Softwareontwikkeling

woensdag 2 juni 2004 11:38

Acties:

Verwijderd

Topicstarter

Beetje vage omschrijving, maar goed.

Ik heb de volgende code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<?
if($_POST['Submit']){
    print "<pre>";
    print_r($_POST);
    print "</pre>";
}
?>
<form action="test.php" method="post">
<table id="theTable" width="300" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <td width="30%">kolom 1 </td>
    <td width="30%">kolom 2 </td>
    <td width="30%">kolom 3 </td>
  </tr>
</table>
<input type="submit" name="Submit" value="Submit">
</form>

<script language="javascript">
    var theTable = document.getElementById('theTable'); 
    var newPos   = theTable.rows.length;
    var newRow   = theTable.insertRow(newPos);

    for(var i=0; i<=2; i++){
        var newCell = newRow.insertCell(i); 
        tempNameID  = 'veldnaam['+i+']';
        var newEl   = document.createElement('input');
        newEl.setAttribute('type', 'text');
        newEl.setAttribute('name', tempNameID);
        newEl.setAttribute('id', tempNameID);
        newCell.appendChild(newEl);
        newCell.innerHTML += '&nbsp;Veld&nbsp;'+i; <!-- Deze regel weglaten, dan worden de vars wel meegestuurd ! //-->
    }
</script>
</body>
</html>

Bijna onderaan het script staat een regel met een comment.
Als ik deze regel weglaat worden de aangemaakte input-velden wel meegestuurd (dit wordt gecontroleerd door het stukje PHP). Maar als ik innerHTML aan de cell toevoeg dan worden de velden gewoon weergegeven, maar niet meegestuurd.
Hoe kan dit???

woensdag 2 juni 2004 11:59

Acties:

André

Analytics dude

JavaScript:

1	newCell.innerHTML = newCell.innerHTML + " Veld " + i;

[ Voor 13% gewijzigd door André op 02-06-2004 11:59 ]

woensdag 2 juni 2004 12:05

Acties:

Verwijderd

Topicstarter

Dat had ik natuurlijk al geprobeerd en dat werkt dus helaas ook niet!

woensdag 2 juni 2004 12:05

Acties:

Verwijderd

André schreef op 02 juni 2004 @ 11:59:
JavaScript:
1
newCell.innerHTML = newCell.innerHTML + "&nbsp;Veld&nbsp;" + i;

Door die += wordt het toch al toegevoegd aan de innerHTML?

woensdag 2 juni 2004 12:07

Acties:

Verwijderd

Topicstarter

Daarom ... ik vind het maar raar.
Nu kan ik natuurlijk ook de veldnaam ervoor zetten,
dan werkt het wel. Maar dat wil ik.

(ik wil namelijk ook wel eens een woord of plaatje erachter kunnen zetten op deze manier)

woensdag 2 juni 2004 12:11

Acties:

Verwijderd

code:

<FORM action=popup.php method=post>
<TABLE id=theTable cellSpacing=1 cellPadding=5 width=300 border=0>
<TBODY>
<TR>
<TD width="30%">kolom 1 </TD>
<TD width="30%">kolom 2 </TD>
<TD width="30%">kolom 3 </TD></TR>
<TR>
<TD><INPUT id=veldnaam[0]>&nbsp;Veld&nbsp;0</TD>
<TD><INPUT id=veldnaam[1]>&nbsp;Veld&nbsp;1</TD>
<TD><INPUT id=veldnaam[2]>&nbsp;Veld&nbsp;2</TD></TR></TBODY></TABLE><INPUT type=submit value=Submit name=Submit> </FORM>

Deze HTML wordt gegenereerd. Er is dus geen name attribuut. Je moet er een name attribuut bij opgeven.

woensdag 2 juni 2004 12:14

Acties:

Janoz

Moderator Devschuur®

!litemod

Ik heb zelf soortgelijke problemen gehad. Door de innerHtml te herschrijven wordt een ingevuld form veld weer leeg gemaakt.
De geldende html wordt opnieuw neergezet, en de orginele value (het attribuut dus) wordt weer ingevuld. Ik weet niet of het helemaal vergelijkbaar is.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

woensdag 2 juni 2004 12:15

Acties:

Verwijderd

Topicstarter

De naam wordt er al bijgezet in bovenstaand script:

newEl.setAttribute('name', tempNameID);

Wellicht handig als iemand die wil helpen, even het scriptje test?
Want zonder die ene comment regel werkt het prima.
Gaat erom dat er gegevens verloren lijken te gaan als je de innerHTML uitbreidt.

[ Voor 9% gewijzigd door Verwijderd op 02-06-2004 12:16 ]

woensdag 2 juni 2004 12:27

Acties:

drm

f0pc0dert

Waarom gebruik je dan ook halfzachte DOM? Gebruik gewoon document.createTextNode icm appendChild ipv die vieze innerHTML

code:

39
40

        newCell.appendChild(newEl);
        newCell.appendChild ( document.createTextNode ( 'Veld' + i ) );

Works like a charm

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

woensdag 2 juni 2004 12:29

Acties:

Verwijderd

code:

....
     newCell.appendChild(newEl);
    
     var nSpan = document.createElement("span")
     nSpan.innerText = "workaround " + i

     newCell.appendChild(nSpan); 
     alert (newCell.innerHTML );
    }
</script>
</body>
</html>

dit werkt...

edit: (en die van DRM nog eenvoudiger...)

[ Voor 27% gewijzigd door Verwijderd op 02-06-2004 12:31 ]

woensdag 2 juni 2004 12:33

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 02 juni 2004 @ 12:29:
[...]
dit werkt...

edit: (en die van DRM nog eenvoudiger...)

innerText is nog erger dan innerHTML, want itt innerHTML zijn er buiten IE bijna geen browsers die het ondersteunen...

Intentionally left blank

woensdag 2 juni 2004 12:37

Acties:

Verwijderd

Je moet die tekst er gewoon op dezelfde manier neerzetten als de Input field

(ontzettend vaag dat jouw code niet werkt trouwens

)

JavaScript:

<script language="javascript">
    var theTable = document.getElementById('theTable');    
    var newPos   = theTable.rows.length;
    var newRow   = theTable.insertRow(newPos);

    for(var i=0; i<=2; i++){
        var newCell = newRow.insertCell(i);
        tempNameID1    = 'veldnaam['+i+']';
        tempNameID2    = 'spannaam['+i+']';

        var newEl1   = document.createElement('input');
        newEl1.setAttribute('type', 'text');
        newEl1.setAttribute('name', tempNameID1);
        newEl1.setAttribute('id', tempNameID1);

        var newEl2   = document.createElement('span');
        newEl2.setAttribute('id', tempNameID2);

        newCell.appendChild(newEl1);
        newCell.appendChild(newEl2);
        document.getElementById(tempNameID2).innerHTML = '&nbsp;Veld&nbsp;' + i;
    }
</script>

woensdag 2 juni 2004 12:41

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 02 juni 2004 @ 12:37:
Je moet die tekst er gewoon op dezelfde manier neerzetten als de Input field
(ontzettend vaag dat jouw code niet werkt trouwens )

[...]

Nee, als het even kan probeer innerHTML dan vooral te vermijden; het is geen officieel DOM en is nog vaak buggy in verschillende browsers...

Intentionally left blank

woensdag 2 juni 2004 12:51

Acties:

André

Analytics dude

Verwijderd schreef op 02 juni 2004 @ 12:05:
[...]

Door die += wordt het toch al toegevoegd aan de innerHTML?

Ik heb wel eens gehad dat dat niet goed werkt, terwijl het voluit schrijven dan wel goed werkte. Maar zoals gezegd: de DOM oplossing is natuurlijk de mooiste.

woensdag 2 juni 2004 12:57

Acties:

Verwijderd

het is geen officieel DOM

Aha, dat wist ik niet... Maargoed, het is een leuke oplossing en het werkt in de engines van Opera, IE en Mozilla, dus lijkt me niet zo'n groot probleem.

Ik ben nu eigenlijk wel erg benieuwd waarom SpartaRotterdam's code niet werkt!

woensdag 2 juni 2004 13:00

Acties:

André

Analytics dude

Verwijderd schreef op 02 juni 2004 @ 12:57:

Ik ben nu eigenlijk wel erg benieuwd waarom SpartaRotterdam's code niet werkt!

Omdat op zijn manier de innerhtml opnieuw gerenderd word en dus de standaard value van de textbox er weer in staat.

woensdag 2 juni 2004 13:17

Acties:

Janoz

Moderator Devschuur®

!litemod

Ah, dus toch wat ik hier al zei: [rml]Janoz in "[ dhtml] veld weg na innerHTML"[/rml]

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

woensdag 2 juni 2004 13:18

Acties:

André

Analytics dude

Janoz schreef op 02 juni 2004 @ 13:17:
Ah, dus toch wat ik hier al zei: [rml]Janoz in "[ dhtml] veld weg na innerHTML"[/rml]

Ja, maar dan met andere woorden

[ Voor 3% gewijzigd door André op 02-06-2004 13:19 ]

woensdag 2 juni 2004 13:24

Acties:

Verwijderd

Topicstarter

Thanks jongens! ben nog een beetje nieuw in het DOM gebeuren.
Weer wat geleerd ...

Nu weet ik dus weer waarom ik niet document.createTextNode gebruikte:
hier kan ik geen html code mee toevoegen aan de cell

Daarom probeerde ik dus innerHTML, kun je ook op een andere manier met DOM HTMl code toevoegen?

[ Voor 58% gewijzigd door Verwijderd op 02-06-2004 13:33 ]

woensdag 2 juni 2004 14:34

Acties:

Verwijderd

Verwijderd schreef op 02 juni 2004 @ 13:24:
kun je ook op een andere manier met DOM HTMl code toevoegen?

code:

1	document.createElement(tagName)

woensdag 2 juni 2004 15:13

Acties:

Verwijderd

Verwijderd schreef op 02 juni 2004 @ 13:24:
Thanks jongens! ben nog een beetje nieuw in het DOM gebeuren.
Weer wat geleerd ...

Nu weet ik dus weer waarom ik niet document.createTextNode gebruikte:
hier kan ik geen html code mee toevoegen aan de cell
Daarom probeerde ik dus innerHTML, kun je ook op een andere manier met DOM HTMl code toevoegen?

Een heel mooi voorbeeld hiervan is de boomstructuur die microsoft gebruikt op hun msdn website.

Deze hebben ze uiteraard niet zelf gemaakt, maar komt van Aurigma Inc.
(Aurigma Deep Tree 2.0, http://www.aurigma.com)

Bekijk daar de javascriptcode maar van, zij doen alle dingen die je nodig hebt. Een beetje afkijken kan geen kwaad...