Truyền dữ liệu cho một phương thức bootstrap


527

Tôi đã có một vài siêu liên kết mà mỗi liên kết đều có ID. Khi tôi nhấp vào liên kết này, tôi muốn mở một phương thức ( http://twitter.github.com/bootstrap/javascript.html#modals ) và chuyển ID này cho phương thức. Tôi đã tìm kiếm trên google, nhưng tôi không thể tìm thấy bất cứ điều gì có thể giúp tôi.

Đây là mã:

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

Mà nên mở:

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

Với đoạn mã này:

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

Tuy nhiên, khi tôi nhấp vào siêu liên kết, không có gì xảy ra. Khi tôi cung cấp cho siêu liên kết <a href="#addBookDialog" ...>, phương thức sẽ mở tốt, nhưng nó không chứa bất kỳ dữ liệu nào.

Tôi đã làm theo ví dụ này: Cách chuyển các đối số giá trị cho hàm modal.show () trong Bootstrap

(và tôi cũng đã thử điều này: Làm cách nào để đặt giá trị đầu vào trong một cuộc đối thoại phương thức? )

Câu trả lời:


533

Tôi nghĩ bạn có thể thực hiện công việc này bằng cách sử dụng .on của jQuery trình xử lý sự kiện .

Đây là một mẹo mà bạn có thể kiểm tra; chỉ cần đảm bảo mở rộng khung HTML trong fiddle càng nhiều càng tốt để bạn có thể xem phương thức.

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');
});

2
Điều này hoạt động tốt khi tôi chỉ có một siêu liên kết, nhưng tôi có nhiều siêu liên kết, mỗi siêu liên kết có ID riêng. Tôi đã thêm một siêu liên kết thứ hai với một ID khác, nhưng phương thức luôn có ID của siêu liên kết đầu tiên.
Leon Cullens

1
@LeonCullens - Tôi đã cập nhật fiddle và mã. Nó có hoạt động theo cách bạn muốn bây giờ không?
mg1075

2
Câu trả lời tốt - nhưng là modal('show')bắt buộc? Có vẻ như các data-toggle="modal"liên kết sẽ chăm sóc điều đó.
Technophobia

7
chỉ $(this).data('id');là vô giá của riêng nó! Tôi không có ý tưởng rằng bạn có thể nhận được dữ liệu với điều đó. Tôi yêu bootstraps hơn mỗi ngày! = P
Manatax

23
@Manatax - $(this).data()là một phần của jQuery. api.jquery.com/data/#data-html5
mg1075

366

Đây là một cách sạch hơn để làm điều đó nếu bạn đang sử dụng Bootstrap 3.2.0 .

Liên kết HTML

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

Phương thức 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/


1
$ (e.cienTarget) .find ('input [name = "bookId"]'). val (bookId); bạn có thể cho tôi biết cái này làm gì không? Vì vậy, nếu phương thức mở có nghĩa là giá trị của tên đầu vào bookId là giá trị mà nó được nhấp vào phải không?
treblaluch

@treblaluch e.currentTargetlà yếu tố được nhấp, được lấy từ sự kiện nhấp chuột e. Dòng này tìm thấy một inputtên bookIdvà đặt giá trị trên nó.
aalaap

5
thay thế $(this)bằng những $(e.relatedTarget)tác phẩm tuyệt vời
Muhammad Ibnuh

1
Điều này thật tuyệt, cũng hoạt động cho Bootstrap 4
jarrettyeo

36

Đây là cách tôi triển khai nó hoạt động từ mã của @ mg1075. Tôi muốn một mã chung hơn một chút để không phải gán các lớp cho các liên kết / nút kích hoạt phương thức:

Đã thử nghiệm trong 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);
  })
});

2
bạn có thể sử dụng !! $(this).data('id') thay vìtypeof $(this).data('id') !== 'undefined'
Haseeb Zulfiqar

13

Nếu bạn đang sử dụng bootstrap 3+, điều này có thể rút ngắn thêm một chút nếu sử dụng 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>

YÊU CẦU

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

10

Mã của bạn sẽ làm việc với cấu trúc html phương thức chính xác.

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


9

Bootstrap 4.3 - sử dụng mã từ đoạn trích bên dưới - thêm tại đây


1

Đây là cách bạn có thể gửi id_data đến một phương thức:

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

Và javascript:

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

1

Hãy thử với điều này

$(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') 
  })
})

Nhưng nếu bạn đóng Hộp thoại và mở nó cho một Phần tử khác ... bạn sẽ thêm 2 trường Ẩn và sẽ là một mớ hỗn độn khi bạn gửi biểu mẫu của hộp thoại
Pitzas

0

Bạn có thể thử SimpleBootstrapDialog . Tại đây bạn có thể chuyển tiêu đề, tin nhắn, tùy chọn gọi lại để hủy và gửi, v.v ...


4
Chào mừng bạn đến với Stack Overflow! Mặc dù các liên kết là cách tuyệt vời để chia sẻ kiến ​​thức, nhưng chúng sẽ không thực sự trả lời câu hỏi nếu chúng bị hỏng trong tương lai. Thêm vào câu trả lời của bạn nội dung thiết yếu của liên kết trả lời câu hỏi. Trong trường hợp nội dung quá phức tạp hoặc quá lớn để phù hợp ở đây, hãy mô tả ý tưởng chung về giải pháp được đề xuất. Hãy nhớ luôn luôn giữ một tham chiếu liên kết đến trang web của giải pháp ban đầu. Xem: Làm thế nào để tôi viết một câu trả lời tốt?
sunıɔ qɐp

0

Điều này thật dễ dàng với jquery:

Nếu bên dưới là liên kết neo của bạn:

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

Trong sự kiện hiển thị phương thức của bạn, bạn có thể truy cập vào thẻ neo như bên dưới

//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')
    // ...
    // ...
})

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.