Попытка добавить загрузочный gif во время работы метода с использованием ruby ​​на рельсах ОБНОВЛЕНО: теперь используется javascript

Question

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

У меня есть это в моем файле application.js:

function showProgress() {
  $('.content').hide();
  $('.progress').show();
}

$(document).ready(function () {
  $('.progress').hide();       
  $('.btn-primary').on('click', showProgress);
});

и в моем html-файле (показать файл для моего контроллера) у меня есть:

<div class="content">
...
  <%= link_to 'Run Test', runTest_path, :class => "btn-primary", :method => :get%>
...
</div>


<div class="progress">
  <%= image_tag "loading2.gif"%>
</div>

Этоработает как задумано, однако работает только в первый раз, когда я нажимаю кнопку, чтобы запустить метод, и после этого он не показывает gif.Кроме того, если я не сразу нажму кнопку, которая запускает метод после создания экземпляра (когда он перенаправляет на эту страницу показа), и перейду к другой части веб-приложения, тогда появится gif загрузки, когда я вернусь на эту страницу показа иисчезнет только когда я обновлюсь.Есть предложения?

Answer 1

Как говорится в комментарии, вы, вероятно, захотите использовать javascript для этого, поскольку он связан с такими событиями, как загрузка страницы.

Вот JavaScript

$(function() {
  $(document).on('ready', function() {
    $('.progress').css('display', 'none');
  });
});

В HTML у меня есть это. Я использую JavaScript, чтобы скрыть его после загрузки страницы (код приведен выше).

<div class="progress">
  <%= image_tag "loading2.gif"%>
</div>

Если это поможет, вот css для класса загрузчика, вы должны иметь возможность настроить его для своих нужд.

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1f1f1f;
  z-index: 99996;
  height: 100%;
  width: 100%;
  overflow: hidden !important;
}