Übergabe von Daten an ein Bootstrap-Modal

Question

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? )

Answer 1

Versuchen Sie es mit diesem

$(function(){
 //when click a button
  $("#miButton").click(function(){
    $(".dynamic-field").remove();
    //pass the data in the modal body adding html elements
    $('#myModal .modal-body').html('<input type="hidden" name="name" value="your value" class="dynamic-field">') ;
    //open the modal
    $('#myModal').modal('show') 
  })
})

Answer 2

Ich habe herausgefunden, dass dies für mich funktioniert:

In dem Link:

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>

Im Modal:

<div id="message<?php echo $row['id'];?>" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <?php echo $row['id'];?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Answer 3

Um einen href-Wert zu aktualisieren, würde ich zum Beispiel etwas tun wie:

<a href="#myModal" data-toggle="modal" data-url="http://example.com">Show modal</a>

$('#myModal').on('show.bs.modal', function (e) {
    var url = $(e.relatedTarget).data('url');
    $(e.currentTarget).find('.any-class').attr("href", "url");
})

Answer 4

So können Sie die id_data an ein Modal senden:

<input
    href="#"
    data-some-id="uid0123456789"
    data-toggle="modal"
    data-target="#my_modal"
    value="SHOW MODAL"
    type="submit"
    class="btn modal-btn"/>

<div class="col-md-5">
  <div class="modal fade" id="my_modal">
   <div class="modal-body modal-content">
     <h2 name="hiddenValue" id="hiddenValue" />
   </div>
   <div class="modal-footer" />
</div>

Und das javascript :

    $(function () {
     $(".modal-btn").click(function (){
       var data_var = $(this).data('some-id');
       $(".modal-body h2").text(data_var);
     })
    });

Answer 5

Ich denke, Sie brauchen jQuery dafür nicht. Sie könnten verwenden onclick Ereignis und Pass bookId zu einer Javascript-Funktion, mit der Sie das Element abfragen und den Wert der Eingabe festlegen.

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

et

<script>
    function passBookId(bookId) {
        let inputElement= document.document.querySelector("div.modal-dialog input[name='bookId'");
        if (inputElement) {
            inputElement.value = bookId;
        }
        return true;
    }
</script>