Блог

Я нашел пример того, как добавить счетчик к кнопке во время выполнения запроса в фоновом режиме.

 $(function(){

var spinnerHTML = "<span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>",
    spinnerObjects = $(".has-spinner");

spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML   "amp;nbsp;")
spinnerObjects.filter("[data-spinner=right]").append("amp;nbsp;"   spinnerHTML)
spinnerObjects.click(function() {
    $(this).toggleClass('active');
});
});
  

Я удалил части добавления и предпослания, поскольку они были не тем, что мне было нужно, и переписал их, чтобы они выглядели следующим образом.

 function toggleSpinner(active) {
alert('here!');
spinnerObjects = $(".has-spinner");
spinnerObjects.each(function () {
    if (active) {
        alert('Got here!');
        $(this).add(' active');
    }
    else {
        alert('Also got here!');
        $(this).remove('active');
    }
});
}
  

Я вызываю его из своего запроса на обновление следующим образом.

 function refreshView(url, divName) {
//alert('Got here!');
toggleSpinner(true);
$.ajax({
    type: 'POST',
    url: url,
    success: function (response) {
        if (response.success) {
            //console.log(response.html);
            $(divName).html(response.html);
            // Hide the "busy" gif:
            toggleSpinner(false);
            $.notify(response.message, "success");
        }
        else {
            // Hide the "busy" gif:
            toggleSpinner(false);
            $.notify(response.message, "error");
        }
    },
    error: function (jqxhr, status, exception) {
        alert('jQueryAjaxPost - Exception:', exception);
    }
});
}
  

Вот HTML-код кнопки:

     <button class="btn btn-primary has-spinner btn-primary" type="button" onclick="refreshView('@Url.Action("ViewEmployeePayItemDetail", "Employee", new { params omitted })', '#Detail_@Model.EmpId')">
         <span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>
            @Model.EmpNo
    </button>
  

И связанный с ним CSS:

 .spinner {
    display: inline-block;
    opacity: 0;
    max-width: 0;
    -webkit-transition: opacity 0.25s, max-width 0.45s;
    -moz-transition: opacity 0.25s, max-width 0.45s;
    -o-transition: opacity 0.25s, max-width 0.45s;
    transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we 
    animate additional hidden width */
}

.has-spinner.active {
    cursor: progress;
}

.has-spinner.active .spinner {
    opacity: 1;
    max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}
  

Я добираюсь до кода toggleSpinner, и оповещения запускаются / включаются, как ожидалось (один раз на кнопку при каждом запуске), но блесны активируются не так, как должны.

Я сильно подозреваю, что