JS: Eventhandler Inputfield funktioniert nur bei manueller Eingabe

[Jörg]

Hallo Forum,

ich habe ein Inputfield, das bei input oder change einen Ajax abfeuern soll.

Das funktioniert auch, wenn ich das Inputfield manuell ausfülle. Nun soll es aber auch funktionieren, wenn das Feld über ein anderes Javascript ausgefüllt wird.

Geht sowas nicht?

Na klar könnte ich auch das "andere javascript" dann den Ajax abfeuern lassen, aber es wäre für mich modularer und vielseitiger nutzbar, wenn ich sozusagen diese beiden Javascripte hintereinander und voneinander unabhängig nutzen könnte. Denn das erste JS ist in einem allgemeinen Script hinterlegt, das für viele verschiedene Situationen gültig sein soll. Das 2. JS käme nur in diesem speziellen Fall zum Einsatz, daher würde ich es gerne aus dem JS-Hauptscript heraus lassen.

Mein Code:

  <div>
    <input type="text" id="qr-reader-results1" placeholder="Ergebnis 1">
    <button id="startButton1" data-scanner-id="1" data-target-id="qr-reader-results1" data-open-scanner="true">Start Scanning 1</button>
  </div>


<script>
  // Eventhandler für Änderungen im versteckten Eingabefeld
  var hiddenQRCodeField = document.getElementById("qr-reader-results1");
  hiddenQRCodeField.addEventListener("input", function () {
      alert("blabla");
...

Das Inputfeld soll günstigstenfalls mit einem über ein Mobilphone eingelesenen QR-Code gefüllt werden, was auch funktioniert.

Nun soll das Ajax abgefeuert werden (hier durch einen alert simmuliert), das die DB abfragt und die Ergebnisse sollen in ein Div eingesetzt werden.

Ich hatte das zuvor über ein DIV und MutationObserver gelöst. Das funktioniert zwar, aber es gab immer wieder Probleme mit dem initialisieren und beenden des MutationObserver, was dann entweder in Dauerfeuern des Ajax endete oder aber darin, dass ich den MutationObserver nicht weider neu initialisiert bekam.

Daher jetzt die Idee, ein (später) verstecktes Inputfield zu nehmen und einen "Formular-Eventhandler" darauf anzusetzen. Für weitere Ideen bin ich offen, aber vielleicht hat ja auch jemand eine idee, wie ich den Eventhandler zum arbeiten bringen kann, obwohl JS den Input vornimmt und nicht ich an der Tastatur.

Jörg

[Jörg]

Daher jetzt die Idee, ein (später) verstecktes Inputfield zu nehmen und einen "Formular-Eventhandler" darauf anzusetzen. Für weitere Ideen bin ich offen, aber vielleicht hat ja auch jemand eine idee, wie ich den Eventhandler zum arbeiten bringen kann, obwohl JS den Input vornimmt und nicht ich an der Tastatur.

Ich habe es jetzt vorerst mal so gelöst, dass ich im "hauptscript" einen dispatchEvent auf die Inputs ansetze. Das macht im Zweifel nichts "Böses" und hilft mir in meinem Fall.

Bin aber nach wie vor an weiteren pfiffigen Ideen interessiert.

Jörg

[Rolf B]

Hallo Jörg,

so ist es aber richtig. Änderungen, die Du im JavaScript ausführst, lösen keine change/input Events aus. Andernfalls könnte das Endlos-Eventkaskaden erzeugen.

Das Event musst Du als CustomEvent erzeugen und bubbling aktivieren:

let event = new CustomEvent("change", { bubbles:true });
inputElement.dispatchEvent(event);

Rolf

[Jörg]

Hallo Rolf,

Das Event musst Du als CustomEvent erzeugen und bubbling aktivieren:

let event = new CustomEvent("change", { bubbles:true });
inputElement.dispatchEvent(event);

Ist "bubbling" nicht ohnehin standardmäßig aktiviert und ich kann es weglassen, im Sinne von:

// Event auslösen
targetElement.dispatchEvent(new Event('input'));

Jörg

[Rolf B]

Hallo Jörg,

bei CustomEvents nicht:

t = new CustomEvent("change");
console.log(t.bubbles);
// false

Bei MouseEvent oder InputEvent auch nicht, wenn man sie manüll erzeugt.

Rolf

[Jörg]

Hallo Rolf,

Bei MouseEvent oder InputEvent auch nicht, wenn man sie manüll erzeugt.

Bist du da sicher?
Wo kann ich das nachlesen?

ich dachte immer, dass ein natürliches Event (im Gegensatz zu einem custom event) ein bubbling standardmäßig unterstützt, daher hatte ich es weg gelassen.

Jörg

[Jörg]

ich dachte immer, dass ein natürliches Event (im Gegensatz zu einem custom event) ein bubbling standardmäßig unterstützt, daher hatte ich es weg gelassen.

JUnd ich dachte weiter, dass "input, change, click" natürliche Events sind.
Aber sie werden wohl zu "custom", sobald man sie über JS generiert??

Dann verstehe ich das jetzt mit dem bubbling.
Ok, in meinem Fall eher unnötig, weil ich auch ohne bubbling auskäme, aber gut zu wissen.

Jörg