I have a table with a bunch of data, and I've placed a button at the end of each row that I want to use to trigger a modal and pass the unique id of that row into the modal.
I found this answer: Passing data to a bootstrap modal
But it doesn't appear to work with Bootstrap 3, and I can't find any data about this anywhere any ideas?
I'm using the same code listed:
Header:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<link href = "bootstrap/css/styles.css" rel = "stylesheet">
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val(myBookId);
});
</script>
</head>
Body:
<a data-toggle="modal" data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
Modal:
<div class="modal" 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>
The resulting page will open the modal, but the text field is blank.
I forgot to mention, I do have both jquery and bootstrap loaded:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.js"></script>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
