Symfonyコントローラのロードスピナーを使用してBootstrapモーダルへのAjaxリクエスト

Question

ボタンをクリックすると特定のレコードに関する情報を表示するためのモーダルを作成しました。

{% for seat in seats %} 
    <span class="fa-stack fa-lg seat" id="{{ seat.id }}" data-toggle="modal" data-target="#seatModal"> 
     <i style="color: lightgrey;" class="fa fa-stop fa-stack-2x"></i> 
     <strong style="color: white;" class="fa-stack-1x"> 
      {{ seat.seatNo }} 
     </strong> 
    </span> 
{% endfor %} 

<div class="modal fade seat-details" id="seatModal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"></div> 
    </div> 
</div> 

私は、そのシートアイコンをクリックすると、特定のシートの情報を取得するAjaxリクエストがあります。

$(document).ready(function() { 
    $('.seat').click(function() { 
     var url = Routing.generate('show_seat', {'seat': $(this).attr('id')}); 
     $.get(url, function (data) { 
      $(".modal-content").html(data); 
     }); 
    }); 
}); 

このAJAX呼び出しは、このコントローラのアクションにつながる「show_seat」ルートに要求を行う：

public function showSeatAction(Seat $seat) 
{ 
    return $this->render('AppBundle:Seat:seat_details.html.twig', [ 
     'seat' => $seat, 
    ]); 
} 

このアクションはseat_details.html.twigで詳細をレンダリングします。

<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">Seat Details</h4> 
</div> 
<div class="modal-body table-responsive no-padding"> 
    <table class="table table-modal"> 
     <tbody> 
      <tr> 
       <th>Description</th> 
       <td>{{ seat.desc }}</td> 
      </tr> 
      <tr> 
       <th>Seat Number</th> 
       <td>{{ seat.seatNo }}</td> 
      </tr> 
      <tr> 
       <th>Status</th> 
       <td> 
        {% if seat.status == 'special' %} 
         <span class="label label-info">{{ seat.status|upper }}</span> 
        {% elseif seat.status == 'bad' %} 
         <span class="label label-warning">{{ seat.status|upper }}</span> 
        {% else %} 
         <span class="label label-default">{{ seat.status|upper }}</span> 
        {% endif %} 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

そしてAjaxリクエストが完了したときは、そのAjaxの機能で見ることができるように最終的にはそれがモーダルにそれをロードします。$(".modal-content").html(data);。

これはうまくいきましたが、現在はスピナーを追加しようとしています。これは、モーダルを開くと右のデータが表示されますが、閉じて新しいモデルを開くとモデルが開きます以前のデータと比較して、Ajaxが完了すると、テキストデータがモーダルで置き換えられます。

しかし、Ajaxが完了してから完全なモーダルが表示されるまで、スピナーを表示させたいと思います。

私はこれを追加しようとしました：

$(document).on({ 
    ajaxStart: function() { $('.loading').show() }, 
    ajaxStop: function() { $('.loading').hide() } 
}); 

これは、クリックすると、スピナーが見えますとAjaxが行われたときにそれを隠しますが、モーダルはまだ早すぎる表示されます。だから私はこれにこれを修正しようとしました：

$(document).on({ 
    ajaxStart: function() { 
     $('.loading').show(); 
     $('.seat-details').hide(); 
    }, 
    ajaxStop: function() { 
     $('.loading').hide(); 
     $('.seat-details').show(); 
    } 
}); 

しかし、これは何も変更されません。

誰かがこれを修正するために私を助けることができますか？

Answer 1

var seatModal = $("#seatModal");//your modal 

$(document).on({ 
    ajaxStart: function() { 
     seatModal.find(".modal-content").html("");//empty modal every ajaxstart 
     $('.loading').show(); 
     seatModal.modal("hide");//hide 

    }, 
    ajaxStop: function() { 
     $('.loading').hide(); 
     seatModal.modal("show");//modal show 
    } 
}); 

Answer 2

他の方法で処理することができます。モーダルを何も持たずに初期化する。

次に、ユーザーがモーダルを閉じると、コンテンツが削除され、スピナーで置き換えられます。

$(".modal").on("hidden.bs.modal", function(){ 
    $(".modal-content").html([your spinner here]); 
});