Cara mengirim id ke modal bootstrap

By On Tuesday, October 11th, 2022 Categories : Tanya Jawab

Cara mengirim id ke modal bootstrap – Hallo Agan semua, Terima Kasih sudah berkunjung ke web TrendWisata ini. Malam ini, saya di website TrendWisata mau share tanya dan jawab yang cool yang mengulas Cara mengirim id ke modal bootstrap. Ayo bapak dan ibu menyimaknya setelah ini:

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 memberi hyperlink 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: Bagaimana mengatur nilai input dalam dialog modal? )

Saya pikir Anda dapat membuat pekerjaan ini menggunakan penangan event
.on jQuery.

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 superfluous to have to manually call the modal.
     // $('#addBookDialog').modal('show');
);

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/

Inilah cara saya mengimplementasikannya 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);
  )
);

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>

Kode Anda akan berfungsi 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>

Dalam Bootstrap 4.3, gunakan kode dari cuplikan di bawah ini – selengkapnya sini

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

Cara mengirim id ke modal bootstrap | admin | 4.5
shopee flash sale gratis ongkir
x