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

Question

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

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

Это то, что у меня есть:

#images_list 

Является ДИВ идентификатор, который получает бодрым после удаления изображения и содержит все изображения

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

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 в проекте).

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

Благодаря

Edit2: К сожалению для размещения столько кода, но я не могу понять, почему метод, предложенный в первом ответе не будет работать.
В удалять кнопки внутри #images_list не будет вызывать скрытое состояние по некоторым причинам, только первый (за пределами 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> 

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