时间戳

首页 > 解决方案 > 移除 Spinner 动画 Boostrap / JS

javascript - 移除 Spinner 动画 Boostrap / JS

问题描述

我正在尝试在显示结果后删除微调器动画。

<script>
var url = "TEST";
$(document).ready(function () {
    document.getElementById('spinner').setAttribute('style', 'display:none')
    $("button").click(function () {
        document.getElementById('response').setAttribute('style', 'display:none')
        var searchText = document.getElementById('searchText').value;
        var countryCode = document.getElementById('countryCode').value;
        $('#btn').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true" id"loading"></span>En cours...').addClass('disabled');
        $.ajax({
            type: 'POST',
            url: url,
            data: {
                'query': searchText,
                'country_code': countryCode
            },
            success: function (response) {
                console.log(response);
                document.getElementById('response').setAttribute('style', 'display:block')
                document.getElementById('spinner').setAttribute('style', 'display:none');
                create_response(response);
            },
            error: function (data) {
                document.getElementById('spinner').setAttribute('style', 'display:none');
                document.getElementById('btn').setAttribute('style', 'display:block');
                alert('Error! Try again..');
                console.log(data);
            },
        });
    });

});

    <div class="d-flex justify-content-center"><button id="btn" class="btn btn-primary" >Extraire</button></div>
<div class="d-flex justify-content-center"><button id ="spinner" class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  En cours...
</button>

Spinner 在结果后仍然显示。我不知道如何恢复按钮。

请注意，一些代码已被删除。

谢谢您的帮助

标签： javascriptbootstrap-4

解决方案

您需要将按钮的状态恢复到添加微调器之前的状态。

<script>
var url = "TEST";
$(document).ready(function () {
    document.getElementById('spinner').setAttribute('style', 'display:none')
    $("button").click(function () {
        document.getElementById('response').setAttribute('style', 'display:none')
        var searchText = document.getElementById('searchText').value;
        var countryCode = document.getElementById('countryCode').value;
        $('#btn').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true" id"loading"></span>En cours...').addClass('disabled');
        $.ajax({
            type: 'POST',
            url: url,
            data: {
                'query': searchText,
                'country_code': countryCode
            },
            success: function (response) {
                console.log(response);
                $('#btn').html('Extraire').removeClass('disabled');
                create_response(response);
            },
            error: function (data) {
                $('#btn').html('Extraire').removeClass('disabled');
                alert('Error! Try again..');
                console.log(data);
            },
        });
    });

});
</script>

此外，该disable课程并没有阻止您的按钮被使用，不确定这是否是故意的。

要正确禁用按钮，请使用以下代码：

$('#btn').attr("disabled", true);

当您完成加载结果（或出现错误时）时，再次将该值设置为 false。

推荐阅读