Does a bootstrap modal have an onload event? I want to call a http GET request when the modal is opened to populate the modal with data from a rest api. I have a form in the modal and I have called the GET function on the onload event of the form, but it doesn't work.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Agent details:</h4>
</div>
<div class="modal-body">
<form onload="getData()" style= "font-size: 16pt">
Answer: Use the Bootstrap . modal('show') method modal('show') method for launching the modal window automatically when page load without clicking anything. A common example of this technique is loading the modal when user landed on the home page and requesting them to subscribe the website newsletter.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
Per the documentation, you can listen to the show or shown events.
From The Documentation:
show.bs.modal => This event fires immediately when the show instance method is called.
shown.bs.modal => This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
$('#myModal').on('show.bs.modal', function () {
// do something…
})
What I've found to be the best way to do this is to add the onclick attribute to the html element that calls the modal.
<button type="button" onclick="PopulateAddModal()" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#AddModal">Add</button>
Then in your javascript..
function PopulateAddModal() {
//do stuff here...
}
This will ensure that your code is ran as soon as the modal is called. Otherwise, the javascript code will not run until the modal has completely finished it's "fade-in" animation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With