Daten an ein Bootstrap-Modal übergeben

527

Ich habe ein paar Hyperlinks, an die jeweils eine ID angehängt ist. Wenn ich auf diesen Link klicke, möchte ich ein Modal öffnen ( http://twitter.github.com/bootstrap/javascript.html#modals ) und diese ID an das Modal übergeben. Ich habe auf 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>

Welches sollte öffnen:

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

Mit diesem Code: 

$(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 gebe <a href="#addBookDialog" ...>, öffnet sich das Modal einwandfrei, enthält aber keine Daten.

Ich folgte diesem Beispiel: So übergeben Sie Wertargumente an die Funktion modal.show () in Bootstrap

(und ich habe auch Folgendes versucht: Wie stelle ich den Eingabewert in einem modalen Dialog ein? )

javascript jquery asp.net-mvc twitter-bootstrap Leon Cullens
quelle

Antworten:

533

Ich denke, Sie können diese Arbeit mit dem .on- Ereignishandler von jQuery erledigen .

Hier ist eine Geige, die Sie testen können. Stellen Sie einfach sicher, dass Sie den HTML-Frame in der Geige so weit wie möglich erweitern, damit Sie das Modal anzeigen können.

http://jsfiddle.net/Au9tc/605/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});
mg1075
quelle
2
Dies funktioniert gut, wenn ich nur einen Hyperlink habe, aber mehrere Hyperlinks mit jeweils eigener ID. Ich habe einen zweiten Hyperlink mit einer anderen ID hinzugefügt, aber das Modal hat immer die ID des ersten Hyperlinks.
Leon Cullens
1
@LeonCullens - Ich habe die Geige und den Code aktualisiert. Funktioniert es jetzt so, wie Sie es möchten?
mg1075
2
Gute Antwort - aber ist das modal('show')erforderlich? Scheint, als würde sich das data-toggle="modal"auf den Links darum kümmern.
Technophobie
7
Nur das $(this).data('id');war von unschätzbarem Wert für sich! Ich hatte keine Ahnung, dass Sie damit die Datenattribute erhalten könnten. Ich liebe Bootstraps jeden Tag mehr! = P
Manatax
23
@Manatax - $(this).data()ist Teil von jQuery. api.jquery.com/data/#data-html5
mg1075
366

Hier ist eine sauberere Möglichkeit, dies zu tun, wenn Sie Bootstrap 3.2.0 verwenden .

HTML verknüpfen

<a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a>

Modales JavaScript

//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {

    //get data-id attribute of the clicked element
    var bookId = $(e.relatedTarget).data('book-id');

    //populate the textbox
    $(e.currentTarget).find('input[name="bookId"]').val(bookId);
});

http://jsfiddle.net/k7FC2/

LostInComputer
quelle
1
$ (e.currentTarget) .find ('input [name = "bookId"]'). val (bookId); Kannst du mir sagen, was das macht? Wenn also das Modal offen ist, was bedeutet, dass der Wert des Eingabenamens bookId der Wert ist, von dem aus rechts darauf geklickt wurde?
Treblaluch
@treblaluch e.currentTargetist das angeklickte Element, das dem Klickereignis entnommen wird e. Diese Zeile findet eine inputmit dem Namen bookIdund legt den Wert darauf fest.
Aalaap
5
Ersetzen $(this)durch $(e.relatedTarget)Werke großartig
Muhammad Ibnuh
1
Das ist großartig, funktioniert auch für Bootstrap 4
jarrettyeo
36

Hier ist, wie ich es implementiert habe, indem ich den Code von @ mg1075 verwendet habe. Ich wollte etwas allgemeineren Code, um den modalen Trigger-Links / Schaltflächen keine Klassen zuweisen zu müssen:

Getestet in Twitter Bootstrap 3.0.3.

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a>

JAVASCRIPT

$(document).ready(function() {

  $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {

    var data_id = '';

    if (typeof $(this).data('id') !== 'undefined') {

      data_id = $(this).data('id');
    }

    $('#my_element_id').val(data_id);
  })
});
JW
quelle
2
Sie können !! $(this).data('id') anstelle vontypeof $(this).data('id') !== 'undefined'
Haseeb Zulfiqar
13

Wenn Sie mit Bootstrap 3+ arbeiten, kann dies bei Verwendung von Jquery etwas weiter verkürzt werden.

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a>

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <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">
            Modal Body
            <input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

JQUERY

<script type="text/javascript">
    $(function () {
        $(".identifyingClass").click(function () {
            var my_id_value = $(this).data('id');
            $(".modal-body #hiddenValue").val(my_id_value);
        })
    });
</script>
VTStampede
quelle
10

Ihr Code hätte mit der richtigen 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>
Erweitern Sie das Snippet

phil
quelle
9

Bootstrap 4.3 - Verwenden Sie den Code von unten - mehr hier

Code-Snippet anzeigen

Kamil Kiełczewski
quelle
1

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);
     })
    });
Abhishek Rana
quelle
1

Versuchen Sie es damit

$(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') 
  })
})
Dey-Dey
quelle
Aber was ist, wenn Sie den Dialog schließen und für ein anderes Element öffnen ... Sie werden 2 versteckte Felder hinzufügen und es wird ein Chaos, sobald Sie die Form des Dialogs senden
Pitzas
0

Sie können simpleBootstrapDialog ausprobieren . Hier können Sie Titel, Nachricht, Rückrufoptionen zum Abbrechen und Senden usw. übergeben.

Jithin Vijayan
quelle
4
Willkommen bei Stack Overflow! Während Links eine großartige Möglichkeit sind, Wissen zu teilen, werden sie die Frage nicht wirklich beantworten, wenn sie in Zukunft kaputt gehen. Fügen Sie Ihrer Antwort den wesentlichen Inhalt des Links hinzu, der die Frage beantwortet. Falls der Inhalt zu komplex oder zu groß ist, um hierher zu passen, beschreiben Sie die allgemeine Idee der vorgeschlagenen Lösung. Denken Sie daran, immer einen Link zur Website der ursprünglichen Lösung zu führen. Siehe: Wie schreibe ich eine gute Antwort?
sɐunıɔ ןɐ qɐp
0

Mit jquery ist das so einfach:

Wenn unten Ihr Ankerlink ist:

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

Im Show-Event Ihres Modals können Sie wie unten beschrieben auf das Ankertag 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')
    // ...
    // ...
})
Ehsan Ahmadi
quelle