I've got a couple of hyperlinks that each have an ID attached. When I click on this link, I want to open a modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), and pass this ID to the modal. I searched on google, but I couldn't find anything that could help me.
This is the code:
<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>
Which should open:
<div class="modal hide" id="addBookDialog">
<div class="modal-body">
<input type="hidden" name="bookId" id="bookId" value=""/>
</div>
</div>
With this piece of code:
$(document).ready(function () {
$(".open-AddBookDialog").click(function () {
$('#bookId').val($(this).data('id'));
$('#addBookDialog').modal('show');
});
});
However, when I click the hyperlink, nothing happens. When I give the hyperlink <a href="#addBookDialog" ...>
, the modal opens just fine, but it does't contain any data.
I followed this example: How to pass values arguments to modal.show() function in Bootstrap
(and I also tried this: How to set the input value in a modal dialogue?)
This question is related to
javascript
jquery
asp.net-mvc
twitter-bootstrap
If you are on bootstrap 3+, this can be shortened a bit further if using 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">×</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>
Here's how I implemented it working from @mg1075's code. I wanted a bit more generic code so as not to have to assign classes to the modal trigger links/buttons:
Tested in 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);
})
});
Bootstrap 4.0 gives an option to modify modal data using jquery: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content
Here is the script tag on the docs :
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
It works for the most part. Only call to modal was not working. Here is a modification on the script that works for me:
$(document).on('show.bs.modal', '#exampleModal',function(event){
... // same as in above script
})
For updating an href value, for example, I would do something like:
<a href="#myModal" data-toggle="modal" data-url="http://example.com">Show modal</a>
$('#myModal').on('show.bs.modal', function (e) {
var url = $(e.relatedTarget).data('url');
$(e.currentTarget).find('.any-class').attr("href", "url");
})
Found this works for me:
In the link:
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>
In the modal:
<div id="message<?php echo $row['id'];?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<?php echo $row['id'];?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is a cleaner way to do it if you are using Bootstrap 3.2.0.
Link HTML
<a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a>
Modal JavaScript
//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);
});
This is how you can send the id_data to a modal :
<input
href="#"
data-some-id="uid0123456789"
data-toggle="modal"
data-target="#my_modal"
value="SHOW MODAL"
type="submit"
class="btn modal-btn"/>
<div class="col-md-5">
<div class="modal fade" id="my_modal">
<div class="modal-body modal-content">
<h2 name="hiddenValue" id="hiddenValue" />
</div>
<div class="modal-footer" />
</div>
And the javascript :
$(function () {
$(".modal-btn").click(function (){
var data_var = $(this).data('some-id');
$(".modal-body h2").text(data_var);
})
});
Bootstrap 4.3 - use code from below snippet - more here
$('#exampleModal').on('show.bs.modal', function (event) {_x000D_
let bookId = $(event.relatedTarget).data('bookid') _x000D_
$(this).find('.modal-body input').val(bookId)_x000D_
})
_x000D_
a.btn.btn-primary.open-AddBookDialog {color: white }
_x000D_
<!-- Initialize Bootstrap 4 -->_x000D_
_x000D_
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">_x000D_
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>_x000D_
_x000D_
<!-- BUTTON -->_x000D_
_x000D_
<a _x000D_
class="btn btn-primary open-AddBookDialog" _x000D_
data-toggle="modal" _x000D_
data-target="#exampleModal" _x000D_
data-bookid="@book.Id" _x000D_
title="Add this item"_x000D_
>Open</a>_x000D_
_x000D_
<!-- MODAL -->_x000D_
_x000D_
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">_x000D_
<div class="modal-dialog" role="document">_x000D_
<div class="modal-content">_x000D_
_x000D_
<div class="modal-body">_x000D_
<input type="hidden" name="bookId" id="bookId" value=""/>_x000D_
<input type="text" class="form-control" id="recipient-name"> _x000D_
</div>_x000D_
_x000D_
<div class="modal-footer">_x000D_
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
This is so easy with jquery:
If below is your anchor link:
<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>
In the show event of your modal you can access to the anchor tag like below
//triggered when modal is shown
$('#modal_id').on('shown.bs.modal', function(event) {
// The reference tag is your anchor tag here
var reference_tag = $(event.relatedTarget);
var id = reference_tag.data('id')
// ...
// ...
})
You can try simpleBootstrapDialog. Here you can pass title, message, callback options for cancel and submit etc...
To use this plugin include simpleBootstrapDialog.js file like below
<script type="text/javascript" src="/simpleDialog.js"></script>
Basic Usage
<script type="text/javascript>
$.simpleDialog();
</script>
Custom Title and description
$.simpleDialog({
title:"Alert Dialog",
message:"Alert Message"
});
With Callback
<script type="text/javascript>
$.simpleDialog({
onSuccess:function(){
alert("You confirmed");
},
onCancel:function(){
alert("You cancelled");
}
});
</script>
Try with this
$(function(){
//when click a button
$("#miButton").click(function(){
$(".dynamic-field").remove();
//pass the data in the modal body adding html elements
$('#myModal .modal-body').html('<input type="hidden" name="name" value="your value" class="dynamic-field">') ;
//open the modal
$('#myModal').modal('show')
})
})
Your code would have worked with correct modal html structure.
$(function(){_x000D_
$(".open-AddBookDialog").click(function(){_x000D_
$('#bookId').val($(this).data('id'));_x000D_
$("#addBookDialog").modal("show");_x000D_
});_x000D_
});
_x000D_
<html>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
_x000D_
<a data-id="@book.Id" title="Add this item" class="open-AddBookDialog">Open Modal</a>_x000D_
_x000D_
<div id="addBookDialog" class="modal fade" tabindex="-1" role="dialog">_x000D_
<div class="modal-dialog" role="document">_x000D_
<div class="modal-content">_x000D_
<div class="modal-body">_x000D_
<input type="hidden" name="bookId" id="bookId" value=""/>_x000D_
</div>_x000D_
_x000D_
</div><!-- /.modal-content -->_x000D_
</div><!-- /.modal-dialog -->_x000D_
</div><!-- /.modal -->_x000D_
</html>
_x000D_
I find this approach useful:
Create click event:
$( button ).on('click', function(e) {
let id = e.node.data.id;
$('#myModal').modal('show', {id: id});
});
Create show.bs.modal event:
$('#myModal').on('show.bs.modal', function (e) {
// access parsed information through relatedTarget
console.log(e.relatedTarget.id);
});
Extra:
Make your logic inside show.bs.modal to check whether the properties are parsed, like for instance as this:
id: ( e.relatedTarget.hasOwnProperty( 'id' ) ? e.relatedTarget.id : null )
Source: Stackoverflow.com