ブートストラップモーダルでデータのロード成功を処理するにはどうすればよいですか？

Question

我々は持っている：

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

データがsuccessfulyロード時にたとえばにconsole.log（）すべての時間を作る方法は？ documentationから

Answer 1

：

リモート

このオプションは、V3.3.0以降廃止され、V4で削除されました。クライアント側のテンプレートまたはデータバインディングフレームワークを使用するか、jQuery.loadを自分で呼び出すことをお勧めします。

いずれの場合においても

、あなたが使用することができます：モーダルがで、だから、コードをリモートオプション

を使用してコンテンツをロードしたときに、このイベントが発生し

loaded.bs.modalあなたの場合は次のようになります。

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

例：

$('#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>