I have a simple Bootstrap modal:
<div id="mymodal" class="modal fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
...
<div>
</div>
I have attached it with a button using data-toggle
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal"> Toggle</button>
Now when the button is clicked the modal will show up. The modal body contains a div
which needs to be pre-populated. I used below code to do this:
$('#mymodal').on('shown.bs.modal', function(){
generate_modal_body();
})
But above code is not working.
Surprisingly, if I add click
event on the button on modal, it can triggers the generate_modal_body()
. I have checked similar questions here but could not find satisfactory answer.
Please let me know if I am missing something obvious.
Please attach the shown event of bootstrap modal in the document ready function.
<script type="text/javascript">
$(document).ready(function () {
$('#mymodal').on('shown.bs.modal', function() {
generate_modal_body();
}) ;
});
</script>