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调用向＆＃39; show_seat＆＃39;执行请求。导致此控制器操作的路线：

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

Private Sub CopyColumnsButton_Click()

Dim sourceColumn As Range, targetColumn As Range

Set sourceColumn = Workbooks("Check for logging.xlsm").Worksheets("Parameters").Columns("A")
Set targetColumn = Workbooks("Unit test template.xlsm").Worksheets("Sheet1").Columns("A")

sourceColumn.Copy Destination:=targetColumn

End Sub

Answer 2

您可以使用其他方式处理。在其中没有任何内容的情况下初始化您的模态。

然后，当用户关闭模态时，删除内容并将其替换为微调器。

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

使用Symfony控制器的加载微调器向Ajax请求进入Bootstrap模式

2 个答案: