ブートストラップモーダル - すぐにモーダル閉じ閉じる

Question

サーバーへのGET要求を行い、データベースのデータでモーダルを設定しようとしています。私はAPIのようにして、将来私にとってより簡単にしようとしています。

すべてのアンカータグにshowAjaxModalクラスを追加することで、アンカータグの属性にhrefという属性にモーダルを自動的にロードし、ajaxリクエストを実行しようとしています。なぜなら、エンドユーザの経験への有害な影響の廃止されて、メインスレッド上

同期のXMLHttpRequest：

はしかし、そう、それはすべての作品が、モーダルはすぐに消えるを行う時に、私は、このエラーメッセージが表示されます。詳細についてはhttps://xhr.spec.whatwg.org/をご確認ください。

JSフィドル：https://jsfiddle.net/43jj3q30/

コード：

<a class="btn btn-primary showAjaxModal" data-toggle="modal" href="/api/path-to-request" data-target="#modal-id">Trigger modal</a> 

モーダル：

<div class="modal fade" id="modal-id"> 

    <div class="modal-dialog"> 

     <div id="modal-loading-icon"></div> 

     <div class="modal-content"> 

      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 

      <div class="modal-body"> 
       Modal body ... 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 

     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

私のAjaxコード：

$('.showAjaxModal').click(function (event) { 
      var loadingIcon = $('.modal-loading-icon'); 
      var ajaxUrl = $(this).attr('href'); 

      $.ajax({ 
       url: ajaxUrl, 
       beforeSend: function() { 
        loadingIcon.show(); 
       } 
      }).success(function (data) { 

       event.preventDefault(); 
       loadingIcon.hide(); 
//    $('.modal-body').html(data); 
       $('.modal-body').html('test'); 

      }); 
     }); 

私は正確にここで間違っていますか？助けてください。

ありがとうございました！

Answer 1

にあなたのリンクを変更

：

<a class="btn btn-primary showAjaxModal">Trigger modal</a> 

と

$('#modal-id').modal('show'); //add this line to your success callback 

追加 -

success(function (data) { 
    event.preventDefault(); 
    $('#modal-id').modal('show'); //add 
    loadingIcon.hide(); 
    // $('.modal-body').html(data); 
    $('.modal-body').html('test'); 

    }); 

作業のデモ：https://jsfiddle.net/43jj3q30/3/