admin管理员组

文章数量:1245188

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 = ".10.2/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.js"></script>

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./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.js"></script>
  • javascript
  • twitter-bootstrap-3
Share Improve this question edited May 23, 2017 at 11:54 CommunityBot 11 silver badge asked Dec 21, 2013 at 20:13 bryanxbryanx 1691 gold badge3 silver badges11 bronze badges 4
  • You seem to be doing it right. To be absolutely sure, try console.log-ing both myBookId and $(".modal-body #bookId"). Do they contain what they should? – Lasse Commented Dec 21, 2013 at 20:17
  • I'm getting a Uncaught ReferenceError: $ is not defined which is referring to the line $(document).on("click", ".open-AddBookDialog", function () { – bryanx Commented Dec 21, 2013 at 21:10
  • if $ is not defined, then you haven't loaded jQuery onto the page yet. You'll need both jQuery and bootstrap's JS. – satchmorun Commented Dec 21, 2013 at 21:58
  • I have loaded jQuery, I even moved the scripts up into the header to see if that would solve it, but it didn't change anything :( – bryanx Commented Dec 21, 2013 at 23:16
Add a ment  | 

1 Answer 1

Reset to default 9

Try manually triggering the modal, rather than using the data API.

Update the hyperlink like so:

<a data-id="ISBN" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

Then adjust your jQuery code:

$(document).on("click", ".open-AddBookDialog", function (e) {

    e.preventDefault();

    var _self = $(this);

    var myBookId = _self.data('id');
    $("#bookId").val(myBookId);

    $(_self.attr('href')).modal('show');
});

Seems to work for me; jsFiddle @ http://jsfiddle/4XJ54/

本文标签： javascriptPassing data to Bootstrap 3 ModalStack Overflow

版权声明：本文标题：javascript - Passing data to Bootstrap 3 Modal - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1740133719a2230229.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。