Передача даних до режиму завантаження


526

У мене є декілька гіперпосилань, до яких кожен приєднав ідентифікатор. Коли я натискаю на це посилання, я хочу відкрити модальний ( http://twitter.github.com/bootstrap/javascript.html#modals ) і передати цей ідентифікатор модальному. Я шукав у Google, але не знайшов нічого, що могло б мені допомогти.

Це код:

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

Що має відкритись:

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

З цим фрагментом коду:

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

Однак, коли я натискаю гіперпосилання, нічого не відбувається. Коли я даю гіперпосилання <a href="#addBookDialog" ...>, модальний режим відкривається просто чудово, але він не містить ніяких даних.

Я дотримувався цього прикладу: Як передавати аргументи значень функції modal.show () у Bootstrap

(і я також спробував це: як встановити вхідне значення в модальному діалозі? )

Відповіді:


533

Я думаю, що ви можете зробити цю роботу, використовуючи обробник подій jQuery .on .

Ось загадка, яку ви можете випробувати; просто переконайтеся, що максимально розгорніть кадр HTML у скрипці, щоб ви могли переглянути модальний.

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
Це добре працює, коли у мене є лише одне гіперпосилання, але у мене є кілька гіперпосилань, у кожного зі своїм ідентифікатором. Я додав друге гіперпосилання з іншим ідентифікатором, але модальний завжди має ідентифікатор першого гіперпосилання.
Леон Калленс

1
@LeonCullens - я оновив скрипку та код. Це працює так, як ви хочете зараз?
mg1075

2
Гарна відповідь - але чи modal('show')потрібна? Схоже, посилання data-toggle="modal"на це допоможе подбати про це.
технофобія

7
просто це $(this).data('id');було безцінне самостійно! Я не мав уявлення, що ти можеш отримати дані про це натяки. Я щодня люблю завантажувачі більше! = P
Манатакс

23
@Manatax - $(this).data()це частина jQuery. api.jquery.com/data/#data-html5
mg1075

365

Ось більш чистий спосіб зробити це, якщо ви використовуєте Bootstrap 3.2.0 .

Посилання HTML

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

Модальний 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.currentTarget) .find ('input [name = "bookId"]'). val (bookId); ви можете мені сказати, що це робить? Отже, якщо модал відкритий, тобто значення вхідного імені bookId - це значення, з якого його натискали правильно?
treblaluch

@treblaluch e.currentTarget- це клацається елемент, який взято з події клацання e. Цей рядок знаходить inputім'я bookIdта встановлює для нього значення.
aalaap

5
заміна $(this)з $(e.relatedTarget)відмінно працює
Мухаммад Ibnuh

1
Це чудово, працює і для Bootstrap 4
jarrettyeo

36

Ось як я реалізував це, працюючи з кодом @ mg1075. Я хотів трохи більш загального коду, щоб не довелося призначати класи модальним посиланням / кнопкам тригера:

Тестовано у 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
ви можете використовувати !! $(this).data('id') замістьtypeof $(this).data('id') !== 'undefined'
Haseeb Zulfiqar

13

Якщо ви перебуваєте на завантажувальній версії 3+, це можна трохи зменшити, якщо використовувати 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>

ДЖЕРКА

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

10

Ваш код працював би з правильною модальною структурою html.

$(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 - використовуйте код знизу фрагмента - докладніше тут


1

Ось як можна надіслати id_data до модального режиму:

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

І javascript:

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

1

Спробуйте з цим

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

Але що робити, якщо ви закриєте Діалог і відкриєте його для іншого Елементу ... ви додасте 2 приховані поля, і це буде безлад, коли ви надішлете форму діалогу
Pitzas

0

Ви можете спробувати simpleBootstrapDialog . Тут ви можете передати заголовок, повідомлення, варіанти зворотного дзвінка для скасування та надсилання тощо ...


4
Ласкаво просимо до переповнення стека! Хоча посилання - чудовий спосіб обміну знаннями, вони насправді не дадуть відповіді на питання, якщо вони в майбутньому будуть порушені. Додайте до своєї відповіді необхідний зміст посилання, яке відповідає на запитання. Якщо зміст занадто складний або занадто великий, щоб тут вмістити, опишіть загальну ідею запропонованого рішення. Не забудьте завжди зберігати посилання на веб-сайт оригінального рішення. Дивіться: Як написати гарну відповідь?
sɐunıɔ ןɐ qɐp

0

Це так просто за допомогою jquery:

Якщо нижче - ваша прив'язка:

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

У показовому випадку вашого модального ви можете отримати доступ до тегу прив’язки, як показано нижче

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.