Lem Lem - 1 month ago 5
Ajax Question

How handle success load of data with bootstrap modal?

We have:

$('#myModal').modal({
show: true,
remote: '/some/api/url/',
//onComplete: function() ???
//success: function() ???
});


How for example make console.log() every time when data successfuly loaded?

Answer

From documentation:

remote

This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

In any case, you can use:

loaded.bs.modal This event is fired when the modal has loaded content using the remote option

So the code, in your case will be:

$('#myModal').on('loaded.bs.modal', function (e) {
      // do something...
})

An example:

$('#myModal').modal({
  show: true,
  remote: 'https://api.github.com/users/defunkt'
});
$('#myModal').on('loaded.bs.modal', function (e) {
  $("#myModal").css({"height":'150px',"overflow-y":"auto"});
  console.log('remote content loaded');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>