Melewati data ke modal bootstrap

527

Saya punya beberapa hyperlink yang masing-masing memiliki ID. Ketika saya mengklik tautan ini, saya ingin membuka modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), dan meneruskan ID ini ke modal. Saya mencari di google, tetapi saya tidak dapat menemukan apa pun yang dapat membantu saya.

Ini kodenya:

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

Yang seharusnya terbuka:

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

Dengan kode ini: 

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

Namun, ketika saya mengklik hyperlink, tidak ada yang terjadi. Ketika saya memberikan hyperlink <a href="#addBookDialog" ...>, modal terbuka dengan baik, tetapi tidak mengandung data apa pun.

Saya mengikuti contoh ini: Cara meneruskan argumen nilai ke fungsi modal.show () di Bootstrap

(dan saya juga mencoba ini: Cara mengatur nilai input dalam dialog modal? )

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

Jawaban:

533

Saya pikir Anda dapat membuat karya ini menggunakan jQuery .on event handler.

Ini biola yang bisa Anda uji; pastikan untuk memperluas bingkai HTML di biola sebanyak mungkin sehingga Anda dapat melihat modal.

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
sumber
2
Ini berfungsi baik ketika saya hanya memiliki satu hyperlink, tetapi saya memiliki beberapa hyperlink, masing-masing dengan ID mereka sendiri. Saya menambahkan hyperlink kedua dengan ID lain, tetapi modal selalu memiliki ID dari hyperlink pertama.
Leon Cullens
1
@LeonCullens - Saya sudah memperbarui biola dan kode. Apakah itu bekerja seperti yang Anda inginkan sekarang?
mg1075
2
Jawaban yang bagus - tetapi apakah ini modal('show')wajib? Sepertinya data-toggle="modal"pada tautan akan mengurus hal itu.
technophobia
7
hanya $(this).data('id');itu tak ternilai harganya sendiri! Saya tidak tahu bahwa Anda bisa mendapatkan data attribs dengan itu. Saya lebih menyukai sepatu boot setiap hari! = P
Manatax
23
@Manatax - $(this).data()adalah bagian dari jQuery. api.jquery.com/data/#data-html5
mg1075
366

Ini adalah cara yang lebih bersih untuk melakukannya jika Anda menggunakan Bootstrap 3.2.0 .

Tautkan HTML

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

JavaScript Modal

//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
sumber
1
$ (e.currentTarget) .find ('input [name = "bookId"]'). val (bookId); dapatkah Anda memberi tahu saya apa yang dilakukannya? Jadi jika modalnya terbuka artinya nilai dari input name bookId adalah nilai yang diklik kan?
treblaluch
@treblaluch e.currentTargetadalah elemen yang diklik, yang diambil dari acara klik e. Baris ini menemukan sebuah inputdengan nama bookIddan menetapkan nilainya.
aalaap
5
ganti $(this)dengan $(e.relatedTarget)karya-karya hebat
Muhammad Ibnuh
1
Ini hebat, bekerja untuk Bootstrap 4 juga
jarrettyeo
36

Inilah cara saya menerapkannya dengan bekerja dari kode @ mg1075. Saya ingin kode generik sedikit lebih agar tidak harus menetapkan kelas ke modal trigger links / buttons:

Diuji di 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
sumber
2
Anda dapat menggunakan !! $(this).data('id') sebagai gantinyatypeof $(this).data('id') !== 'undefined'
Haseeb Zulfiqar
13

Jika Anda menggunakan bootstrap 3+, ini dapat dipersingkat lebih jauh jika menggunakan Jquery.

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
sumber
10

Kode Anda akan bekerja dengan struktur modal html yang benar.

$(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>
Luaskan cuplikan

phil
sumber
9

Bootstrap 4.3 - gunakan kode dari cuplikan di bawah ini - selengkapnya di sini

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber
1

Ini adalah bagaimana Anda dapat mengirim id_data ke modal:

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

Dan javascript: 

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

Coba dengan ini

$(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
sumber
Tetapi bagaimana jika Anda menutup Dialog, dan membukanya untuk Elemen lain ... Anda akan menambahkan 2 bidang Tersembunyi dan itu akan berantakan setelah Anda mengirim bentuk dialog
Pitzas
0

Anda dapat mencoba simpleBootstrapDialog . Di sini Anda dapat meneruskan opsi judul, pesan, panggilan balik untuk membatalkan dan mengirim dll ...

Jithin Vijayan
sumber
4
Selamat Datang di Stack Overflow! Meskipun tautan adalah cara yang bagus untuk berbagi pengetahuan, mereka tidak akan benar-benar menjawab pertanyaan jika mereka rusak di masa depan. Tambahkan ke jawaban Anda konten penting dari tautan yang menjawab pertanyaan. Jika kontennya terlalu kompleks atau terlalu besar untuk muat di sini, jelaskan gagasan umum dari solusi yang diajukan. Ingatlah untuk selalu menyimpan referensi tautan ke situs web solusi asli. Lihat: Bagaimana saya menulis jawaban yang baik?
sɐunıɔ ןɐ qɐp
0

Ini sangat mudah dengan jquery:

Jika di bawah ini adalah tautan jangkar Anda:

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

Dalam acara modal Anda, Anda dapat mengakses tag jangkar seperti di bawah ini

//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
sumber