select input Feld per ajax hinzugefügt aber keine daten Übergabe bei Post

[Felix Riesterer]

Lieber Jens,

Du hast also ein Formular, dessen verkettete Auswahlmöglichkeiten so viele sind, dass Du sie nicht von Anfang an in das Dokument schreiben willst. Können könntest Du schon, aber wollen willst Du nicht. Diese Entscheidung hat selbstverständlich einen Sinn, bedeutet aber auch, dass die dynamische Umgestaltung des Formulars gut überlegt sein will.

Fragen:

1. Was genau sendet der Server auf Deinen AJAX-Request als Antwort?
2. Wonach entscheidet Dein JavaScript, was genau im DOM des Formulars wie geändert werden muss?

Meiner Vorstellung nach sollte der Server keinesfalls HTML-Code auf den AJAX-Call liefern, sondern besser Rohdaten, anhand derer JavaScript dann passende Elementknoten ins DOM schreibt. Das propagiere ich deswegen, weil nach dem initialen HTML-Dokument, welches der Server an den Browser sendet, aus Sicht des Servers keine Gewähr mehr ist, dass das DOM zur Zeit des AJAX-Calls genau so geblieben ist, wie es der Server im HTML-Dokument ursprünglich vorgesehen hat. Wenn JavaScript das DOM umbauen soll, dann muss auch JavaScript entscheiden, was es in welchem Fall genau tut. Also soll der Server keinen HTML-Code nachsenden, sondern Rohdaten, wie z.B. im JSON-Format. Das könnte dann so aussehen:

[
  ["id": "abc", "text": "alle benutzten Computer"],
  ["id": "agb", "text": "allgemeine Geschäftsbedingungen"],
  ["id": "xyz", "text": "x oder y, aber nicht z"]
]

Wenn Du das nicht mit fetch machen willst, sondern weiterhin an Deinem XMLHttpRequest-Objekt festhalten willst, dann geht das auch. Danach hast Du aber ein Array mit key-value-Paaren, welches Du dazu verwenden kannst, die <option>-Elemente in Dein <select> einzufügen.

Die dazu notwendigen Umbauten mögen vielleicht lästig sein, dafür aber hast Du ein modernisiertes Script, dessen Funktionsweise Du verstanden hast (und für die Zukunft hoffentlich entsprechend auskommentiert!), und dessen Funktionalität weniger störanfällig ist, weil das serverseitige Script nichts mehr vom DOM verstehen muss.

Es bleibt nur noch die vielleicht unterschiedliche Performance zwischen dem Setzen der innerHTML-Eigenschaft und dem dynamischen Erzeugen der Elementknoten zu prüfen. Auf leistungsschwächeren Systemen (wie z.B. alten Smartphones) würde sich das schon bemerkbar machen. Aber der Browser muss ja ohnehin Elementknoten erzeugen. Ob er das implizit oder explizit tut, sollte kein Performanceunterschied sein.

Liebe Grüße

Felix Riesterer