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

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

Но удаление удаляется удаленно в хранилище Google через Fog, который занимает пару секунд. Я просто хочу отображать индикатор выполнения или spinner, или что-то, пока изображение удаляется, и до того, как изображение 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' %>");

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

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

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

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

благодаря

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

<div id="images_toggle_div"><code>
 </code><div><code>
 <a href="#" target="_blank">This one works!</a>
 <div id="spinner">
 
 </div>

 

 <div id="images_list">
 <div>
 
 <div>
 <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">9780767880268</a>
 </div>
 <a data-remote="true" href="#" title="Delete this image" target="_blank"> Delete</a>
 </div>
 <div>
 
 <div>
 <a href="http://www.google.com/search?q=upc 9780767880268" target="_blank">43396154162</a>
 </div>
 <a data-remote="true" href="#" title="Delete this image" target="_blank"> Delete</a>
 </div>
 </div>
</code> </div></div>
1 ответ

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

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

%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/

licensed under cc by-sa 3.0 with attribution.