Как изменить поведение загрузки ajax в представлениях?

У меня есть представление с некоторыми открытыми фильтрами в блоке; он использует AJAX и функцию автоматической отправки, поэтому представление загружается заново, как только изменяется параметр фильтра.

Во время короткой задержки между выбором опции и повторной загрузкой представления знакомый синий индикатор AJAX отображается где-то внизу формы (я думаю, где в настоящее время находится скрытая кнопка отправки).

Я знаю, что могу настроить это изображение, переопределив CSS для пульсатора элемент, но я бы предпочел вообще его не использовать.

Что я бы предпочел сделать, так это временно отключить открытую форму фильтра (а в идеале и основной вид), используя анимацию jQuery. Затем они снова исчезнут, когда вызов AJAX будет завершен.

В противном случае я хотел бы использовать тот же метод, который модуль пользовательского интерфейса Views использует при обновлении, а именно размещение этого значка в середине страницы:

enter image description here

Поскольку это уже встроено, я просто предположил, что будет будьте настройкой где-нибудь, чтобы изменить стиль/местоположение этого поведения загрузки; однако такой удачи нет.

Как мне реализовать любой из этих методов?

Я использую Drupal 7 с представлениями 7.x-3.3.

Author: Clive, 2012-05-15
Source

4 answers

Если вы не возражаете использовать небольшой jquery, вы всегда можете сделать что-то вроде:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});
 42
Author: Chance G, 2012-05-18 21:32:06

Для полноты картины вот код, который я в итоге использовал; он исчезает как в открытой форме фильтра, так и в представлении, когда начинается загрузка AJAX, и возвращается снова, когда она заканчивается:

(function($) {
  Drupal.behaviors.events = {
    attach: function(context, settings) {
      $('#views-exposed-form-events-page', context).ajaxStart(function(){
        $('#views-exposed-form-events-page,div.view-id-events', context).fadeTo(300, 0.5);
      });
      $('#views-exposed-form-events-page', context).ajaxSuccess(function(){
         $('#views-exposed-form-events-page', context).fadeTo(300, 1.0);
         $('div.view-id-events', context).css('opacity', 0.5).fadeTo(300, 1.0);
      });
    }
  };
})(jQuery);
 29
Author: Clive, 2012-05-19 11:56:08

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

Это ссылка на песочницу: http://drupal.org/sandbox/ANDiTKO/1556808

Если вы сочтете это полезным, пожалуйста, просмотрите его здесь, чтобы он мог быть утвержден в качестве официального проекта: http://drupal.org/node/1556114

 10
Author: ANDiTKO, 2012-05-24 18:51:35

Я только что провел исследование.
throbber жестко закодирован здесь в конструкторе Drupal.views.ajaxView.
Экземпляр Drupal.views.ajaxView не хранится в Drupal.ajax и существует @todo об этом.
Это означает, что мы не можем войти в объект и установить свои собственные параметры.

Как это работает?

Короткий ответ - CSS.
Просмотр страницы администратора просто скрывает throbber и добавляет стиль своему родителю .ajax-progress-throbber.

.ajax-progress-throbber {
  background-color: #232323;
  background-image: url("../images/loading-small.gif");
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}

Могу ли я что-то сделать с Drupal.ajax?

Да, я нашел некоторые методы, которые вы можете перезаписать для элементов AJAX (кнопки, ссылки и т.д.). Я показал пример здесь: Как расширить или "зацепить" AJAX-форму Drupal?. Но в этом случае все будет не так хорошо.
Элемент прогресса отображается на этапе beforeSend, поэтому вы можете что-то сделать до того, как это произойдет.

 6
Author: kalabro, 2017-04-13 12:47:06