Toon posts:

javascript: dynamisch content toevoegen

Pagina: 1
Acties:

maandag 10 december 2001 14:13

Acties:

Verwijderd

Topicstarter
Ok, heb het volgende 'probleem':

Ik heb een formuliertje waar een bestelling geplaatst kan worden, ziet er (vereenvoudigd) zo uit:

Datum dd-mm-yyyy
Klant selecteer klant
Product(en) selecteer product

selecteer klant en selecteer product zijn linkjes die ieder een popupje genereren met respectievelijk een lijst van klanten en een lijst van producten.

Het probleem ligt bij het selecteren van producten: Ik wil in dat popupje een aantal producten en het te bestellen aantal kunnen selecteren, op een knopje drukken (windowtje wordt weer gesloten) waarop voor ieder product dynamisch een netjes tabelletje wordt gegenereerd in het originele scherm met de productnaam, prijs en aantal erin in het volgende formaat:

naam aantal prijs
prod1 2 R120
prod2 4 R45

(prijzen zijn in Zuid Afrikaanse Randen, maar dat boeit niet)

Het aantal te selecteren producten is dus variabel, dus ook de toe te voegen content

Iemand die me (op z'n minst) de goede richting op kan duwen?

maandag 10 december 2001 14:31

Acties:
  • Pelle
  • Registratie: Januari 2001
  • Laatst online: 18:23

Pelle

🚴‍♂️

Op maandag 10 december 2001 14:13 schreef Mas*Mind het volgende:
Iemand die me (op z'n minst) de goede richting op kan duwen?
De propertie innerHTML klinkt in jouw geval als je vriend :)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<title>juust</title>
<script language="javascript" type="text/javascript">
<!--
    function addTable(divId) {
      document.getElementById(divId).innerHTML += "en hier nog een table<br>";
    }
// -->
</script>
</head>

<body>

<a href="#" onClick="addTable('doed');">add table</a>

<div id="doed">
  hier komt een table.<br>
<div>

</body>
</html>

Vanzelfsprekend kun je er dus ook <table>-tags in gebruiken; bedenk wel dat het pas werkt vanaf IE5 en NS/Mozilla6.

Er zijn andere oplossingen (met document.write() bijvoorbeeld), maar die dus alleen gebruiken als je hoge eisen stelt aan browsercompatibility. Hoewel.. in dit geval is het beter om het serverside op te lossen.. maar als het voor een CMS is, dan kun je gewoon bovengenoemde methode gebruiken.

maandag 10 december 2001 16:09

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:13

crisp

Devver

Pixelated

Op maandag 10 december 2001 14:31 schreef Pelle het volgende:

[..]

De propertie innerHTML klinkt in jouw geval als je vriend :)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<title>juust</title>
<script language="javascript" type="text/javascript">
<!--
    function addTable(divId) {
      document.getElementById(divId).innerHTML += "en hier nog een table<br>";
    }
// -->
</script>
</head>

<body>

<a href="#" onClick="addTable('doed');">add table</a>

<div id="doed">
  hier komt een table.<br>
<div>

</body>
</html>

Vanzelfsprekend kun je er dus ook <table>-tags in gebruiken; bedenk wel dat het pas werkt vanaf IE5 en NS/Mozilla6.

Er zijn andere oplossingen (met document.write() bijvoorbeeld), maar die dus alleen gebruiken als je hoge eisen stelt aan browsercompatibility. Hoewel.. in dit geval is het beter om het serverside op te lossen.. maar als het voor een CMS is, dan kun je gewoon bovengenoemde methode gebruiken.
Je kan ook doen:
code:
1
2
3
4
5

if (document.getElementById) {
  document.getElementById(divId).innerHTML += "en hier nog een table<br>";
} else if (document.all) {
  document.all[divId].innerHTML += "en hier nog een table<br>";
}

werkt het ook al in ie4!
NS4 kan ook, maar da's iets ingewikkelder... (begin ik dus al niet meer aan, tenzij expliciet gevraagd)

Intentionally left blank

Reageer