How to pass values arguments to modal.show() function in Bootstrap
Here's how i am calling my modal
<a data-toggle="modal" data-id="190" data-target="#modal-popup">Open</a>
Here's how i am obtaining value in the modal
$('#modal-popup').on('show.bs.modal', function(e) {
console.log($(e.relatedTarget).data('id')); // 190 will be printed
});
Use
$(document).ready(function() {
$('#createFormId').on('show.bs.modal', function(event) {
$("#cafeId").val($(event.relatedTarget).data('id'));
});
});
I want to share how I did this. I spent the last few days rattling my head with how to pass a couple of parameters to the bootstrap modal dialog. After much head bashing, I came up with a rather simple way of doing this.
Here is my modal code:
<div class="modal fade" id="editGroupNameModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div id="editGroupName" class="modal-header">Enter new name for group </div>
<div class="modal-body">
<%= form_tag( { action: 'update_group', port: portnum } ) do %>
<%= text_field_tag( :gid, "", { type: "hidden" }) %>
<div class="input-group input-group-md">
<span class="input-group-addon" style="font-size: 16px; padding: 3;" >Name</span>
<%= text_field_tag( :gname, "", { placeholder: "New name goes here", class: "form-control", aria: {describedby: "basic-addon1"}}) %>
</div>
<div class="modal-footer">
<%= submit_tag("Submit") %>
</div>
<% end %>
</div>
</div>
</div>
</div>
And here is the simple javascript to change the gid, and gname input values:
function editGroupName(id, name) {
$('input#gid').val(id);
$('input#gname.form-control').val(name);
}
I just used the onclick event in a link:
// ' is single quote
// ('1', 'admin')
<a data-toggle="modal" data-target="#editGroupNameModal" onclick="editGroupName('1', 'admin'); return false;" href="#">edit</a>
The onclick fires first, changing the value property of the input boxes, so when the dialog pops up, values are in place for the form to submit.
I hope this helps someone someday. Cheers.
You could do it like this:
<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a>
Then use jQuery to bind the click and send the Announce data-id as the value in the modals #cafeId:
$(document).ready(function(){
$(".announce").click(function(){ // Click to only happen on announce links
$("#cafeId").val($(this).data('id'));
$('#createFormId').modal('show');
});
});