Übergabe von Daten an ein Bootstrap-Modal

Question

Übergabe von Daten an ein Bootstrap-Modal

Gefragt el 16 de Kann, 2012: Wann wurde die Frage gestellt
1069942 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe einige Hyperlinks, die jeweils mit einer ID versehen sind. Wenn ich auf diesen Link klicke, möchte ich ein modales Fenster öffnen ( http://twitter.github.com/bootstrap/javascript.html#modals ), und übergeben Sie diese ID an das Modal. Ich habe bei Google gesucht, aber ich konnte nichts finden, was mir helfen könnte.

Dies ist der Code:

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>

Das sollte sich öffnen:

<div class="modal hide" id="addBookDialog">
    <div class="modal-body">
        <input type="hidden" name="bookId" id="bookId" value=""/>
    </div>
</div>

Mit diesem Teil des Codes:

$(document).ready(function () {
    $(".open-AddBookDialog").click(function () {
        $('#bookId').val($(this).data('id'));
        $('#addBookDialog').modal('show');
    });
});

Wenn ich jedoch auf den Hyperlink klicke, passiert nichts. Wenn ich den Hyperlink <a href="#addBookDialog" ...> wird das modale Fenster zwar geöffnet, aber es enthält keine Daten.

Ich bin diesem Beispiel gefolgt: Wie man Werte Argumente zu modal.show() Funktion in Bootstrap übergeben

(und das habe ich auch versucht: Wie setzt man den Eingabewert in einem modalen Dialog? )

Gefragt el 16 de Kann, 2012 von Leon Cullens

Answer 1

5 Antworten

Answer 2

11voto

phil Punkte 420

Ihr Code hätte mit einer korrekten modalen HTML-Struktur funktioniert.

$(function(){
  $(".open-AddBookDialog").click(function(){
     $('#bookId').val($(this).data('id'));
    $("#addBookDialog").modal("show");
  });
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a data-id="@book.Id" title="Add this item" class="open-AddBookDialog">Open Modal</a>

<div id="addBookDialog" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
       <input type="hidden" name="bookId" id="bookId" value=""/>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</html>

Beantwortet el 7 de Juni, 2017 von phil (420 Punkte )

Answer 3

11voto

Herbert Van-Vliet Punkte 420

Ich bin mit Bootstrap 5 und kann nicht zeigen() das Modal mit Skript selbst aufgrund von Einschränkungen außerhalb meiner Kontrolle, so bin ich abhängig von Eigenschaften data-bs-toggle und data-bs-target der Schaltfläche, die das Modal aufpoppt.

Bootstrap stellt jedoch ein paar Ereignisse zur Verfügung ( https://getbootstrap.com/docs/5.0/components/modal/ ), an die wir Code wie folgt anhängen können:

document.getElementById('idModal').addEventListener('show.bs.modal', (e) => {
    console.log(e.relatedTarget);
});

In relatedTarget finden wir die angegebenen Datenattribute im Datensatz, z. B. wenn wir ein Element haben, das wie folgt aussieht:

<button
    class="btn btn-secondary"
    data-id="fk_articles"
    data-bs-toggle="modal"
    data-bs-target="#documentationModal">
        Documentation
</button>

Dann können wir fk_articles durch erreichen:

console.log( e.relatedTarget.dataset.id )

Beantwortet el 21 de Februar, 2022 von Herbert Van-Vliet (420 Punkte )

Answer 4

7voto

Ehsan Ahmadi Punkte 1002

Mit Jquery ist das ganz einfach:

Wenn unten Ihr Ankerlink steht:

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>

Im Show-Ereignis Ihres Modals können Sie auf den Anker-Tag wie folgt zugreifen

//triggered when modal is shown
$('#modal_id').on('shown.bs.modal', function(event) {

    // The reference tag is your anchor tag here
    var reference_tag = $(event.relatedTarget); 
    var id = reference_tag.data('id')
    // ...
    // ...
})

Beantwortet el 3 de Kann, 2020 von Ehsan Ahmadi (1002 Punkte )

Answer 5

5voto

Unicco Punkte 2116

Ich halte diesen Ansatz für nützlich:

Klick-Ereignis erstellen:

$( button ).on('click', function(e) {
    let id = e.node.data.id;

    $('#myModal').modal('show', {id: id});
});

Ereignis show.bs.modal erstellen:

$('#myModal').on('show.bs.modal', function (e) {

     // access parsed information through relatedTarget
     console.log(e.relatedTarget.id);

});

Extra:

Machen Sie Ihre Logik innerhalb von show.bs.modal, um zu prüfen, ob die Eigenschaften geparst werden, wie zum Beispiel so: id: ( e.relatedTarget.hasOwnProperty( 'id' ) ? e.relatedTarget.id : null )

Beantwortet el 3 de September, 2020 von Unicco (2116 Punkte )

Answer 6

4voto

shaurya airi Punkte 355

Bootstrap 4.0 bietet eine Option zur Änderung der modale Daten mit Jquery zu ändern: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Hier ist das Skript-Tag in den Docs:

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Im Großen und Ganzen funktioniert es. Nur der Aufruf des Modals funktionierte nicht. Hier ist eine Änderung des Skripts, die für mich funktioniert:

$(document).on('show.bs.modal', '#exampleModal',function(event){
... // same as in above script
})

Beantwortet el 11 de Oktober, 2020 von shaurya airi (355 Punkte )

Übergabe von Daten an ein Bootstrap-Modal

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Übergabe von Daten an ein Bootstrap-Modal

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: