Самый простой способ предоставить уведомление «В процессе» ... «Готово»? - PullRequest
2 голосов
/ 01 июня 2011

Я не новичок в программировании, но немного заржавел в Javascript / веб-разработке. Я создаю приложение с помощью Rails, и у нас есть несколько трудоемких операций, во время которых мы хотим предоставить обратную связь пользователю. По сути, я хочу сделать что-то подобное, используя AJAX:

  1. [Пользователь нажимает «ОК» или «Продолжить»]
  2. [Необязательное поле подтверждения]
  3. Показывать сообщение о состоянии «Работает ...» во время операции
  4. Когда операция заканчивается и данные возвращаются с сервера, сообщение о состоянии меняется на «Готово!» и результаты отображаются или происходит некоторый обратный вызов.

Прошло много времени с тех пор, как я занимался веб-разработкой, и простой пример того, как добиться чего-то подобного, был бы очень полезен. Спасибо.

Ответы [ 3 ]

5 голосов
/ 01 июня 2011
$(window).ajaxStart(function() {
    $("#loader").show();
}).ajaxStop(function() {
    $("#loader").hide();
});

Просто глобально свяжите, чтобы начать и остановить.Этот пример показывает и скрывает загрузчик div.Как правило, у вас есть div с прядильщиком, позволяющим пользователю узнать, что он загружается.

Исчезновение прядильщика должно быть достаточно, сообщение "готово" излишне.

0 голосов
/ 01 июня 2011

Запекаете ли вы свой собственный AJAX-фреймворк или используете встроенный в рельсы?Если это позднее, посмотрите параметры linkt_to (в частности,: update one) http://edgeguides.rubyonrails.org/ajax_on_rails.html

0 голосов
/ 01 июня 2011
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   beforeSend(jqXHR, settings) {
      $(body).append('<div id="overlayStatus">Working...</div>');
   },
   complete(jqXHR, textStatus) {
      $('#overlayStatus').html("Ajax call completed: " + textStatus);
      setTimeout(function(){
         $('#overlayStatus').hide();
      }, 1000);
   }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...