Javascript 使用Symfony controller的加载微调器将Ajax请求转换为引导模式

我已经创建了一个模式，当我点击按钮时，可以显示关于特定记录的信息

{% 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调用执行对“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完成时隐藏，但模式仍然出现得太早。因此，我尝试将其修改为：

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

但这并没有改变任何事情

---

有人能帮我解决这个问题吗？

你可以用其他方法处理。初始化模态，但不包含任何内容

然后，当用户关闭模式时，删除内容并用微调器替换它

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

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

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

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
    }
});