Reputation: 401
I am trying to pass the id of the element to the modal dialog. However, the event is not getting fired. I have looked at bootstrap jquery show.bs.modal event won't fire but it did not help. Here is what I do.
I build a set of links as follows.
// invitations is an array of id's retrieved from the back-end
for (var i = 0; i < invitations.length; i++) {
var labelTxt = '<label><a href="#" data-toggle="modal" id=' + invitations[i] + ' data-target="#modalInvitation">' + invitations[i] + '</a></label>';
$('<div>').text($(labelTxt).appendTo('#myDiv'));
}
My modal dialog is as follows
<div id="modalInvitation" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Invite</h4>
</div>
<div class="modal-body">
<button id="inviteBtn" type="button" class="btn btn-primary" data-dismiss="modal">Invite</button>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Finally I call event, show.bs.modal as follows.
<script type="text/javascript">
$(function() {
$(document).on('show.bs.modal',
'#modalInvitation',
function() {
var inviteId = e.relatedTarget.id;
alert(inviteId);
});
});
However, the event show.bs.modal is not firing. Also referred to this Send parameter to Bootstrap modal window?
Upvotes: 2
Views: 7700
Reputation: 401
Well, there was nothing wrong with the code. While stripping the code to the bare minimum I noticed that I had 2 versions of jQuery running, like so
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Removing the latter solves the problem. The problem still exists if I run just the latter. Not sure why though.
Upvotes: 4