Индикатор выполнения Rails 4 при удалении удаленного файла с помощью тумана и ожидании ответа контроллера

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

Но удаление выполняется удаленно в хранилище Google через туман, что занимает пару секунд. Я просто хочу отображать индикатор выполнения или счетчик или что-то еще, пока изображение удаляется и до того, как div изображений обновится, чтобы пользователи знали, что страница не зависла. У меня все работает, кроме индикатора выполнения.

Вот что у меня есть:

#images_list

Идентификатор div, который обновляется после удаления изображения и содержит все изображения

Действия контроллера:

def delete_image
  EntryImage.destroy
  respond_to do |format|
    format.js # js file that refreshes the images div
  end
end

.js-файл

$('#images_list').html("<%=j render 'entry/display_images' %>");

Все очень просто. Но как я могу загрузить полосу вращения/прогресса, пока я жду, пока контроллер вызовет файл .js?

EntryImage.destroy открывает соединение с туманом, переименовывает и удаляет изображение. Затем, когда он возвращается, вызывается .js, и div обновляется.

Я уверен, что это не слишком сложно, но я новичок в jquery и т. д. В идеале я хотел бы сделать это простым способом «Railsy», используя встроенные технологии, такие как Coffeescript, jquery и даже бутстрап (так как я знаю, что где-то есть индикатор выполнения, и мы уже используем бутстрап в проекте).

Редактировать: я также должен упомянуть, что индикатор выполнения/счетчик должен быть в модальном окне в центре представления, чтобы убедиться, что пользователь видит его, даже если страница прокручивалась, потому что запись содержит много изображений. .

Спасибо

Правка 2: Извините, что публикую так много кода, но я не могу понять, почему метод, предложенный в первом ответе, не работает.
Кнопки удаления внутри #images_list не активируют скрытый state по какой-то причине работает только первый (вне div):

<div id='images_toggle_div' style='display: none;'>
  <div class='well' style='overflow: auto;'>
    <a class="delete-btn" href="#">This one works!</a>
    <div class='hidden' id='spinner'>
      <img alt="Ajaxspinner" src="/assets/ajaxSpinner.gif" style="width: 200px;" />
    </div>

    <script>
      $('.delete-btn').click(function(){
        $('#spinner').toggleClass('hidden');
      });
    </script>

    <div id='images_list'>
      <div class='pull-left bordered'>
        <a href="http://rack.supersecret.com/526-3.jpg" target="_blank"><img alt="526 3" class="small_image" src="http://rack.supersecret.com/526-3.jpg?5090659" title="526-3.jpg (314 x 450)" /></a>
        <div class='tiny'>
          <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">9780767880268</a>
        </div>
        <a class="btn btn-mini btn-danger delete-btn" data-remote="true" href="#" title="Delete this image"><i class="icon-trash icon-white icon-large"></i> Delete</a>
      </div>
      <div class='pull-left bordered'>
        <a href="http://rack.supersecret.com/526-4.jpg" target="_blank"><img alt="526 4" class="small_image" src="http://rack.supersecret.com/526-4.jpg?5090659" title="526-4.jpg (391 x 500)" /></a>
        <div class='tiny'>
          <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">43396154162</a>
        </div>
        <a class="btn btn-mini btn-danger delete-btn" data-remote="true" href="#" title="Delete this image"><i class="icon-trash icon-white icon-large"></i> Delete</a>
      </div>
    </div>

jquery ruby-on-rails-4 fog
person kakubei    schedule 04.02.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете добавить крутящуюся вещь, например, gif или отличный шрифт, через jquery, запускаемый щелчком, а затем в вашем файле js-ответа удалить его, когда изображения вернутся.

На ваш взгляд:

%button#delete-btn Delete image

%img.hidden#spinner{src: "assets/spinner.gif"}
#images_list

:javascript
  $('#delete-btn').click(function(){
    $('#spinner').toggleClass('hidden');
  });

В вашем .js.erb

$('#spinner').toggleClass('hidden');
$('#images_list').html("<%=j render 'entry/display_images' %>");

Это потому, что вы попадаете в файл js.erb только после того, как изображения возвращаются, если я правильно понимаю. В противном случае я бы предпочел, чтобы все манипуляции с DOM, специфичные для объекта, выполнялись в файле js.erb.

CSS:

.hidden {
  display: none;
}

JSFIDDLE: http://jsfiddle.net/b3rgstrom/wr2jz/1/

person noppe    schedule 05.02.2014
comment
Звучит неплохо, но проблема в том, что мне негде разместить счетчик на странице, где он всегда будет виден. Если в записи много изображений, страница будет прокручиваться, а счетчик пропадет. Мне, вероятно, нужно модальное окно, чтобы подойти. Обновлю вопрос. - person kakubei; 05.02.2014
comment
У вас может быть счетчик в классе-оболочке, который перекрывает все окно просмотра в скрытом состоянии. В любом случае, вот скрипка для примера: jsfiddle.net/b3rgstrom/wr2jz - person noppe; 05.02.2014
comment
Спасибо, ваш jsfiddle отлично работает, но по какой-то причине он не будет работать на моей реальной странице Rails. Я не могу понять, почему. Если я помещу кнопку удаления за пределы div #images_list, она будет работать, внутри нее с тем же классом .delete-btn она не будет работать. Я в тупике на этом. Я скопирую html, чтобы увидеть, не пропустил ли я что-то очевидное - person kakubei; 05.02.2014
comment
добавьте документацию, например: jsfiddle.net/b3rgstrom/wr2jz/7, и вы должно быть хорошо. вы можете рассмотреть возможность размещения javascript в конце тела для хорошей меры. - person noppe; 05.02.2014
comment
Спасибо, это здорово. Я также хотел поблагодарить вас за вашу потрясающую преданность этому вопросу. И если я могу побеспокоить вас еще 1 вещью: когда вы нажимаете кнопку удаления, появляется диалоговое окно подтверждения. Я хотел бы скрыть счетчик, если пользователь нажимает кнопку отмены в окне подтверждения. Это возможно? - person kakubei; 06.02.2014
comment
И еще одна маленькая неприятность заключается в том, что когда я щелкаю в любом месте за пределами модального окна счетчика, окно счетчика исчезает. Мне было интересно, смогу ли я этого избежать. Еще раз большое спасибо за все. - person kakubei; 06.02.2014
comment
Новая скрипка, jsfiddle.net/b3rgstrom/wr2jz/8, я помещаю кнопки подтверждения или отмены в модальном, но я уверен, что вы получите идею. - person noppe; 06.02.2014
comment
К сожалению, это стандартное диалоговое окно предупреждения (созданное Rails с помощью data: { confirm: 'message'}, поэтому я не могу создать идентификатор для стандартных кнопок «Отмена» и «ОК». Я также не могу добавить идентификатор для окна, он добавляет data-id к id: 'confirm-window. - person kakubei; 06.02.2014