Как изменить поведение загрузки ajax в Views?


34

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

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

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

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

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

введите описание изображения здесь

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

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

Я использую Drupal 7 с Views 7.x-3.3.


Мммм ... утренний проект :)
Лестер Пибоди

Какой период времени вам нужно сделать в течение?
Лестер Пибоди

@Lester Я не спешу, потому что это не блокировщик релизов ни для одного из проектов, над которыми я работаю ... но я должен признать, что это меня беспокоит! Я редко использую Views, и у меня нет времени (или, если честно, энергии), чтобы «связать» его с более низким уровнем; но так как я сейчас начинаю переносить свои усилия в области электронной коммерции на Drupal Commerce, мне нужно уметь делать подобные вещи. Если я получу хороший ответ в течение 7 дней, я буду
Клайв

Привет, я только что закончил создание своего пользовательского модуля (с настройками страницы администратора) для стилизации пульсаций представлений. Ты все еще интересуешься? Я могу загрузить его в течение нескольких дней на drupal.org
ANDiTKO

1
#random -: -o я думал, что @Clive - это все об ответах, вы даже задаете вопросы;): D
SGhosh

Ответы:


42

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

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});

4
Да, я согласен с этим решением. Просто отметьте, что jQuery ajaxSendи ajaxCompleteможет использоваться с условием if (settings.url == '/views/ajax') {//... }для большего контроля.
Калабро

Ух ты, правда, слишком сложные вещи, это кажется таким очевидным сейчас! Я должен был прикрепить события к форме фильтра, а не к представлению (в противном случае ajaxSuccessсрабатывает только один раз; я думаю, потому что событие не автоматически связывается с замененным <div>), но в остальном это идеально, не говоря уже о красиво простом , Большое спасибо
Клайв

@kalabro Еще раз спасибо за вашу помощь с этим, если бы я мог разделить награду между этим и вашим ответом, я бы; но я должен пойти на это действительно, так как это почти полностью рабочий пример :)
Клайв

@Clive, я очень рад найденному решению :)
kalabro

1
Начиная с jQuery 1.8, метод .ajaxSuccess () должен быть прикреплен только к документу . Сравнение значений настроек, как предлагает Калабро выше, это путь. источник: api.jquery.com/ajaxSuccess
cjoy

29

Для полноты вот код, который я в конечном итоге использовал; он затеняет как открытую форму фильтра, так и представление, когда начинается загрузка 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);

Потрясающе! Я рад, что это сработало для вас.
Шанс G

Как это делается на Drupal 6?
Райан Дж

действительно здорово, но применяется только один раз :)
Kojo

10

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

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

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


Это выглядит великолепно, большое спасибо :) Я установлю его и опубликую некоторые комментарии к обзору, когда у меня будет шанс
Клайв

6

Я только что провел исследование.
Это 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 (кнопки, ссылки и т. Д.). Я показал здесь пример: как расширить или «зацепить» Drupal Form AJAX? , Но в этом случае все будет не так хорошо.
Элемент прогресса отображается на beforeSendэтапе, так что вы можете сделать что-то, прежде чем это произойдет.


Большое спасибо за информацию, но я не уверен, как бы я использовал ее для решения моей проблемы; Вы говорите, что невозможно добавить / изменить поведение загрузки ajax Views по умолчанию за пределами CSS, по крайней мере, без взлома модуля Views?
Клайв

Я имею в виду, вы можете использовать CSS, потому что Views использует его тоже. Просто спрячьте .throbberи добавьте несколько стилей к.ajax-progress-throbber
kalabro

Итак, как открытая форма фильтра в блоке, так и само представление, получают класс, .ajax-progress-throbberкогда вызывается любой AJAX? Должен признать, что я не заметил этого, но я проверю. И вы думаете, я смогу вызывать анимацию jQuery в beforeSendфункции (основываясь на ответе на другой ваш вопрос)? Спасибо, я на самом деле не использую Views, и я не могу потрудиться копаться в каждом кусочке кода, чтобы узнать, что происходит! Я дам вам знать, как я справляюсь с этим
Клайв

1
Что-то, что нужно учитывать для достижения желаемого эффекта затухания элементов формы, вы также можете использовать переходы CSS вместо анимаций jQuery, хотя анимации jQuery будут работать во всех браузерах и переходах CSS только в последнем поколении.
Лестер Пибоди

Спасибо @Lester, я бы предпочел пока использовать jQuery. @kalabro, к сожалению, ваше предложение не работает; ни представление, ни открытый блок фильтра не .ajax-progress-throbberприменяют к ним класс в любой точке, поэтому ваш метод не будет работать. Спасибо за попытку, хотя
Клайв
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.