Как показать анимированный счетчик во время обработки фоновой задачи в модели вложенных рельсов с помощью ajax - PullRequest
Новая
       24

Как показать анимированный счетчик во время обработки фоновой задачи в модели вложенных рельсов с помощью ajax

1 голос
/ 02 февраля 2010

Мой конкретный пример очень сложный, поэтому я буду использовать пример, показанный Райаном из Railscasts, чтобы обсудить это:

http://railscasts.com/episodes/197-nested-model-form-part-2

Фон

У меня естьформа, скажем, «Опрос», которая содержит произвольное количество «Вопросов».

Senario

Дайте мне на странице «Редактировать опрос».

Я быхотел бы добавить кнопку к каждому полю «Вопрос», которая вызывает функцию remote_function, которая в свою очередь помещает в очередь delayed_job для выполнения некоторой обработки «Вопроса».

Чтобы дать отзыв пользователю, я хотел быотключите кнопку и покажите анимированный спиннер, который остается до тех пор, пока delayed_job не обработает «Вопрос».

Подсказка - я могу добавить методы в модель «Вопрос», чтобы указать состояние задержки_job.

Итак, с учетом передового опыта, как лучше всего достичь этого?

Ответы [ 4 ]

3 голосов
/ 20 мая 2011

Сделайте опрос и ответьте с помощью json, подобного этому: 

{"finished": [1,3,3]}

Затем добавьте опросы JavaScript 

  var interval = setInterval(function() {
    $.get("test.json", function(data) {
      for(i in data.finished) {
        //Hide spinner with id = data.finished[i]
      }
    })
  }, 5000) //Time in milliseconds
1 голос
/ 02 февраля 2010

Для начала вам понадобится анимированная вращающаяся графика. Google и есть множество сайтов, которые будут генерировать их для вас.

Ссылка на GIF в вашем макете (или вид) с помощью: 

    <%= image_tag 'spinner.gif', :id => 'spinner', :style => "display:none;position:absolute;top:300px;left:500px;" %>

(это предполагает фиксированное положение на странице)

Затем добавьте следующее к вашему вызову remote_function: 

:before => "Element.show('spinner')",
:after => "Element.hide('spinner')"
1 голос
/ 02 февраля 2010

Simple.

  1. Создать скрытый элемент для отображения наших изображений
  2. Используйте CSS для форматирования макета
  3. Используйте Javascript для включения / выключения эффекта

Поместите HTML в шаблон вашей страницы 

//hidden div that has spinner image
<div id="LoadingDiv" style="display:none;">
        <img src="ajax-loader.gif" alt="" /></div>

Несколько простых CSS для форматирования блока ( это создало полупрозрачный фон, блокирующий взаимодействие с пользователем ) 

/*the basics, and works for FF*/
#LoadingDiv{
    margin:0px 0px 0px 0px;
    position:fixed;
    height: 100%;
    z-index:9999;
    padding-top:200px;
    padding-left:50px;
    width:100%;
    clear:none;
    background:url(/img/transbg.png);
    /*background-color:#666666;
    border:1px solid #000000;*/
    }
/*IE will need an 'adjustment'*/
* html #LoadingDiv{
     position: absolute;
     height: expression(document.body.scrollHeight &gt; document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    }

Затем включите и выключите при необходимости 

var ldiv = document.getElementById('LoadingDiv');
ldiv.style.display='block';
/*Do your ajax calls, sorting or laoding, etc.*/
ldiv.style.display = 'none';

Если вы хотите получить более подробную информацию или использовать полупрозрачный пиксель, см. Мою статью

Как скрыть окно и показать полупрозрачный индикатор выполнения

0 голосов
/ 02 февраля 2010

Используя jQuery, вы сможете включать и выключать пульсатор (да ... это "официальное" имя) с помощью обратных вызовов.

Или, если это сложнее, я использовал это раньше:

http://plugins.jquery.com/project/throbber

...