bootstrap, Variable an INPUT Feld in einem MODAL übergeben

[Kolwitz]

Nachdem ich so viel Beiträge zu meiner letzten Frage bekommen habe, wo ich sehr dankbar bin und ziemlich viel davon in die Tat umsetze. habe ich gleich noch ein zweites Anliegen.

ich arbeite mit bootstrap, und möchte dort verschieden Wert an ein Ausgabe Formular Namen modal übergeben, das mit Javascript gemacht wird. Nun schaffe ich es zwar das die Daten übergeben und in einem SPAN ausgegeben werden. Doch ich bekomme Sie in kein INPUT Feld hinein.

Hier kann man mein Problem sehen:

https://codepen.io/anon/pen/jKEqOw

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-myvalue="trouducul" data-myvar="bisbis">
  Launch demo modal 1
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-myvalue="troudbal" data-bb="troudbal">
  Launch demo modal 2
</button>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <span id="modal-myvalue"></span> <span id="modal-myvar"></span> <span id="modal-bb"></span>
        <input id="modal-bb" type="text" > ########### <- hier soll die VAR rein
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

var ATTRIBUTES = ['myvalue', 'myvar', 'bb'];

$('[data-toggle="modal"]').on('click', function (e) {

  var $target = $(e.target);

  var modalSelector = $target.data('target');
  
    $modalAttribute.text(dataValue || '');
  });
});

[Christian Kruse]

Hallo Kolwitz,

setze einfach den Wert des Input-Felds via JS, bevor du das Modal anzeigst. Bootstraps Modals haben da ein Event show.bs.modal für. Also etwas in diese Richtung:

$('#myModal').on('show.bs.modal', function() {
  $("#modal-bb").val("the value");
});

Statt "the value" müsstest du halt den Wert oder die Variable nehmen, die du dort gesetzt haben willst.

LG,
CK

[Kolwitz]

Sorry, JavaScript ist WIRKLICH nicht mein Ding.

https://codepen.io/anon/pen/jKEqOw

Ich habe es nochmal verkürzt rein. Wenn ich mir den Java Script Code ansehe müsste da ja auch eine Anweisung bezüglich des SPAN stehen, oder?

$('#myModal').on('show.bs.modal', function() {
   $("#modal-data1").val("data-data1");
});

[Christian Kruse]

Hallo Kolwitz,

Ich habe es nochmal verkürzt rein. Wenn ich mir den Java Script Code ansehe müsste da ja auch eine Anweisung bezüglich des SPAN stehen, oder?

Ich habe deine Frage so verstanden, dass du deinen Wert in das Input reingeschrieben haben möchtest. Ist dem nicht so? Habe ich dich da falsch verstanden?

LG,
CK

[Kolwitz]

Nein du hast alles richtig verstanden, das ist so.....

[Christian Kruse]

Hallo Kolwitz,

Nein du hast alles richtig verstanden, das ist so.....

Dann verstehe ich deine Rückfrage bzw. dein Problem nicht 😀 Wie man das macht habe ich dir doch gezeigt?

LG,
CK

[Kolwitz]

Das MODAL wird hier ausgelöst

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

data-1="bitte"

und später hier verarbeitet

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

und hier ausgegeben

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

als Ausgabe bekomme ich **data-1 **es soll aber der Inhalt von data-1="bitte" ausgegeben.

Ich stell mich wohl ein wenig dusselig an ;-)

[Christian Kruse]

Hallo Kolwitz,

verstehe.

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

und später hier verarbeitet

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

und hier ausgegeben

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

Du musst dir den Wert aus dem data-Attribut auslesen. Etwa so:

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

Bootstrap dokumentiert, dass das geklickte Element in der relatedTarget-Eigenschaft des Event-Objekts gespeichert wird.

LG,
CK

[Kolwitz]

erweitere ich dann um jeden Wert die Javascriptanweisung

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

[Christian Kruse]

Hallo Kolwitz,

erweitere ich dann um jeden Wert die Javascriptanweisung

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

Im Grunde ja. Es lohnt sich allerdings ggfls., das $(event.relatedTarget) zu cachen. Außerdem ist das redeklarieren der val-Variable ein Fehler. Ich würde es vermutlich dann in etwa so formulieren:

$('#myModal').on('show.bs.modal', function(event) {
  var $relTrgt = $(event.relatedTarget);

  $("#modal-data1").val($relTrgt.attr('data-1'));
  $("#modal-data2").val($relTrgt.attr('data-2'));
});

LG,
CK

[Kolwitz]

Danke Christian, für die Hilfe

[Gunnar Bittersmann]

@@Christian Kruse

Ich würde es vermutlich dann in etwa so formulieren:

  var $relTrgt = $(event.relatedTarget);

ChrisKrs, verstümmelte Bezeichner sind wohl eher so ’ne mittelgute Idee.

Und warum überhaupt umkopieren und nicht gleich

  $("#modal-data1").val($(event.relatedTarget).attr('data-1'));
  $("#modal-data2").val($(event.relatedTarget).attr('data-2'));

Gibt’s in diesem jQuery kein dataset?

LLAP 🖖

[dedlfix]

Tach!

  var $relTrgt = $(event.relatedTarget);

ChrisKrs, verstümmelte Bezeichner sind wohl eher so ’ne mittelgute Idee.

Solche Abkürzungen finde ich auch nicht so toll. Eigentlich schreibt man den Bezeichner nur einmal vollständig und hat dann für die Tipparbeit-Einsparung die Autovervollständigung. Liest sich dann auch flüssiger.

Und warum überhaupt umkopieren und nicht gleich

Das ist kein 1:1-Umkopieren, da wird aus einem Vanilla-Objekt ein jQuery-Objekt gemacht, und das legt man lieber in einer Variable ab, statt den Vorgang zweimal durchzuführen. Kann man aber auch als Mikrooptimierung werten.

  $("#modal-data1").val($(event.relatedTarget).attr('data-1'));
  $("#modal-data2").val($(event.relatedTarget).attr('data-2'));

Gibt’s in diesem jQuery kein dataset?

.data() existiert.

dedlfix.

[Christian Kruse]

Hallo dedlfix,

  var $relTrgt = $(event.relatedTarget);

ChrisKrs, verstümmelte Bezeichner sind wohl eher so ’ne mittelgute Idee.

Solche Abkürzungen finde ich auch nicht so toll.

Macht nix, ich schon. 😏

Und warum überhaupt umkopieren und nicht gleich

Das ist kein 1:1-Umkopieren, da wird aus einem Vanilla-Objekt ein jQuery-Objekt gemacht, und das legt man lieber in einer Variable ab, statt den Vorgang zweimal durchzuführen. Kann man aber auch als Mikrooptimierung werten.

Nein. Ein jQuery-Call ist teuer. Man sollte sivh nicht angewöhnen das mehrfach hintereinander zu tun. Mikrooptimierungen sind Änderungen mit kleiner Auswirkung, das hier ist eher guter Stil. jQuery-Calls können einem auch teuer zu stehen kommen, etwa in einer Schleife…

  $("#modal-data1").val($(event.relatedTarget).attr('data-1'));
  $("#modal-data2").val($(event.relatedTarget).attr('data-2'));

Gibt’s in diesem jQuery kein dataset?

.data() existiert.

Die Geschichte von data() ist eine Geschichte voller Missverständnisse 😜 vor v3 hat sie sich sehr merkwürdig verhalten, deshalb habe ich mir angewöhnt sie nicht zu verwenden. Sollte ich wohl mal ablegen.

Then again, ich nutze eigentlich selten noch jQuery. Es ist also wohl auch egal.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Ein jQuery-Call ist teuer. Man sollte sivh nicht angewöhnen das mehrfach hintereinander zu tun. Mikrooptimierungen sind Änderungen mit kleiner Auswirkung, das hier ist eher guter Stil. jQuery-Calls können einem auch teuer zu stehen kommen, etwa in einer Schleife…

Da sei die Frage gestattet, warum hier überhaupt jQuery verwenden? „Weil Bootstrap und weil’s einmal da ist“ wäre eine magere Begründung.

Anstatt teurer Calls kann man das ja gleich in Vanilla-JS schreiben.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Da sei die Frage gestattet, warum hier überhaupt jQuery verwenden?

Weil der OP es verwendet. Es war doch offensichtlich, dass er/sie hier eh schon überfordert war.

Abgesehen davon ist das verwenden von jQuery keine schlechte Sache. jQuery ist gut abgehangener Code, die Browser-Abstraktion und -Rückwärts-Kompatiblität ist ausgereift und besser, als es die meisten – inklusive mir – hier zustande bringen.

LG,
CK