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>&lt;a href="#" target="_blank"&gt;This one works!&lt;/a&gt; &lt;div id="spinner"&gt; &lt;/div&gt; &lt;div id="images_list"&gt; &lt;div&gt; &lt;div&gt; &lt;a href="http://www.google.com/search?q=upc 9780767880268" target="_blank"&gt;9780767880268&lt;/a&gt; &lt;/div&gt; &lt;a data-remote="true" href="#" title="Delete this image" target="_blank"&gt; Delete&lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div&gt; &lt;a href="http://www.google.com/search?q=upc 9780767880268" target="_blank"&gt;43396154162&lt;/a&gt; &lt;/div&gt; &lt;a data-remote="true" href="#" title="Delete this image" target="_blank"&gt; Delete&lt;/a&gt; &lt;/div&gt; &lt;/div&gt;</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.