javascript - 使用来自 Symfony Controller 的加载微调器将 Ajax 请求引入 Bootstrap 模式

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 调用执行对导致此 Controller 操作的“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
    }
});