جافا سكريبت - تمرير البيانات إلى مكون مودال في Bootstrap

لديّ عدد قليل من الروابط التشعبية، ولكل منها معرف مرتبط بها. عندما أنقر على هذا الرابط، أريد فتح نافذة منبثقة (http://twitter.github.com/bootstrap/javascript.html#modals)، وتمرير هذا المعرف إلى النافذة المنبثقة. بحثت على جوجل، لكنني لم أتمكن من العثور على أي شيء يمكن أن يساعدني.

هذا هو الكود:

<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

(وحاولت هذا أيضًا: كيفية تعيين قيمة الإدخال في نافذة حوار منبثقة؟)

الإجابة رقم 1

أعتقد أنه يمكنك جعل هذا يعمل باستخدام معالج الأحداث .on في jQuery.

إليك مثال يمكنك اختباره؛ فقط تأكد من توسيع إطار HTML في المثال قدر الإمكان حتى تتمكن من عرض النافذة المنبثقة.

http://jsfiddle.net/8c05pn1f/

إتش تي إم إل

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

جافاسكريبت

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

إليك طريقة أنظف للقيام بذلك إذا كنت تستخدم Bootstrap 3.2.0.

رابط HTML

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

جافا سكريبت مودال

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

الإجابة رقم 3

إليك كيف قمت بتنفيذه بالعمل استنادًا إلى كود @mg1075. أردت كودًا أكثر عمومية بعض الشيء حتى لا أضطر إلى تعيين فئات لروابط/أزرار تفعيل النافذة المنبثقة:

تم الاختبار في تويتر Bootstrap 3.0.3.

إتش تي إم إل

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

جافاسكريبت

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

الإجابة رقم 4

بوتستراب 4.3 - استخدم الكود من المقتطف أدناه - المزيد هنا

$('#exampleModal').on('show.bs.modal', function (event) {
  let bookId = $(event.relatedTarget).data('bookid') 
  $(this).find('.modal-body input').val(bookId)
})

a.btn.btn-primary.open-AddBookDialog {color: white }

<!-- Initialize Bootstrap 4 -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- BUTTON -->

<a 
  class="btn btn-primary open-AddBookDialog" 
  data-toggle="modal" 
  data-target="#exampleModal" 
  data-bookid="@book.Id" 
  title="Add this item"
>Open</a>

<!-- MODAL -->

<div class="modal fade" id="exampleModal" 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=""/>
        <input type="text" class="form-control" id="recipient-name">    
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

الإجابة رقم 5

إذا كنت تستخدم bootstrap 3 أو أحدث، يمكن تقصيره قليلاً أكثر إذا كنت تستخدم Jquery.

إتش تي إم إل

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

الإجابة رقم 6

أنا أستخدم Bootstrap 5 ولا أستطيع عرض الـ modal باستخدام السكريبت بنفسي بسبب قيود خارجة عن إرادتي، لذا أعتمد على خصائص data-bs-toggle و data-bs-target في الزر الذي يفتح الـ modal.

يعرض Bootstrap بعض الأحداث (https://getbootstrap.com/docs/5.0/components/modal/) التي يمكننا ربط الكود بها على النحو التالي:

document.getElementById('idModal').addEventListener('show.bs.modal', (e) => {
    console.log(e.relatedTarget);
});

في relatedTarget، سوف نجد السمات البيانات المحددة في dataset، على سبيل المثال إذا كان لدينا عنصر يبدو هكذا:

<button
    class="btn btn-secondary"
    data-id="fk_articles"
    data-bs-toggle="modal"
    data-bs-target="#documentationModal">
        Documentation
</button>

ثم يمكننا الوصول إلى fk_articles عبر:

console.log( e.relatedTarget.dataset.id )

الإجابة رقم 7

كان سيكون كودك يعمل مع هيكل 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>