Übergabe von Daten inerhalb von Bootstrap 4

[Luise]

Ich möchte vorgegebene Daten asugeben. Ich benutze Bootstrap. Ich habe mich an dem Beitrag https://forum.selfhtml.org/self/2018/may/30/bootstrap-variable-an-input-feld-in-einem-modal-uebergeben/1723332 orientiert.

Doch leider bleibt mein INPUT Feld leer.

Wa smache ich den da verkehrt?

Moni

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"  data-1="bitte">
  Launch demo modal 1
</button>


<input id="modal-data1" type="text" >

$('#myModal').on('show.bs.modal', function(event) {
  var val = $(event.relatedTarget).attr('data-1');
  $("#modal-data1").val(val);
});

[Matthias Apsel]

Hallo Luise,

Moni

oder Moni?

Bis demnächst
Matthias

[Luise]

Monika Aloisia .... richtig Glücklich bin ich über keinen der beiden!

[dedlfix]

Tach!

Wa smache ich den da verkehrt?

Du beschreibst nicht, ob in der Console der Entwicklertools Meldungen zu sehen sind. Hast du da reingeschaut? Hast du weiterhin Debugging-Versuche unternommen, um herauszufinden, an welcher Stelle Daten anders sind als erwartet, und ob die erwarteten Funktionsaufrufe stattfinden oder nicht?

dedlfix.

[Luise]

Console der Entwicklertools Meldungen, so etwas denke ich habe ich nicht.

[dedlfix]

Tach!

Console der Entwicklertools Meldungen, so etwas denke ich habe ich nicht.

Doch, das hat jeder moderne Browser heutzutage eingebaut. Öffne dazu die Entwickler-Tools. Das geht mitunter mit Taste F12, aber auch über Rechtsklick "Element untersuchen" irgendwo im Dokument oder im Menü des Browsers. Dort gibt es dann einen Tab für die Console (der zweite üblicherweise).

Zum anderen Vorschlag: Du könntest mit dem Debugger arbeiten, aber das ist nicht so einfach zu erklären. Da müsstest du dir ein Tutorial suchen. Einfacher ist, Kontrollausgaben in das Script einzubauen. console.log(foo) in den Code setzen und das Ergebnis in der Console bewundern. Statt foo nimmst du die zu untersuchenden Variable oder um den allgemeinen Ablauf zu testen einen beliebigen String. Oder beides gemischt. Dein Code würde mit Kontrollausgaben gespickt zum Beispiel so aussehen:

$('#myModal').on('show.bs.modal', function(event) {
  console.log('event show.bs.modal eingetreten');

  var val = $(event.relatedTarget).attr('data-1');
  console.log('event.relatedTarget ist: ', event.relatedTarget);
  console.log('val hat den Wert: ', val);

  $("#modal-data1").val(val);
});

dedlfix.

[Luise]

Ja, aber auch über die Console bekomme ich keine Fehlermeldung. https://jsfiddle.net/fyopz69s/

ich habs jetzt mal hier hin gestellt.

das einzige wa sich bekomme ist:

Array.forEach is deprecated; use Array.prototype.forEach instead

[dedlfix]

Tach!

Ja, aber auch über die Console bekomme ich keine Fehlermeldung.

Soweit so gut erstmal. Nun würde es weitergehen mit dem Kontrollieren der Daten. Wird das Event aufgerufen? Ist in event.relatedTarget das gewünschte Element? Liefert attr('data-1') den gewünschten Inhalt?

https://jsfiddle.net/fyopz69s/

ich habs jetzt mal hier hin gestellt.

Der Code zeigt mehr vom Problem und verwendet anderen Code als hier vorgestellt. Mach mal eine Kontrolausgabe, was $("#modal-data1") liefert. Und vergleiche die Schreibweisen deiner Bezeichner. jQuery hat auch eine separate Methode, um auf data-Attribute zuzugreifen: .data() statt .attr().

dedlfix.

[Rolf B]

Hallo Luise,

Array.forEach is deprecated; use Array.prototype.forEach instead

Es gibt etliche Funktionen, die Firefox auf dem Typ-Objekt definiert hat statt auf dem Objekt selbst.

let myArray = [ 1, 2, 3, 4 ];

// "normales Javascript"
myArray.forEach(function(z) { console.log(z); });

// "Firefox Special"
Array.forEach(myArray, function(z) { console.log(z); });

Das hat immer nur der Firefox verstanden, es hat den Weg in den Standard nicht geschafft, und darum wird es jetzt auf die Abschussliste gesetzt. Die Frage ist, wo dieser Code steht. Ist das bei Dir, oder in jQuery. Das sollte Dir zusätzlich zu dieser Meldung angezeigt werden.

Wenn es in jQuery ist - welche Version setzt Du ein? Obwohl ich mir nicht vorstellen kann, dass jQuery Code enthält der nur im Firefox läuft...

Rolf