Como altero o comportamento de carregamento do ajax no Views?

34

Eu tenho uma visão com alguns filtros expostos em um bloco; ele usa o AJAX e o recurso de envio automático para que a visualização seja recarregada assim que uma opção de filtro for alterada.

No pequeno atraso entre a seleção de uma opção e a visualização que está sendo recarregada, o familiar throbber AJAX azul é mostrado em algum lugar na parte inferior do formulário (acho que onde o botão de envio oculto está localizado).

Sei que posso personalizar esta imagem substituindo o CSS pelo elemento throbber, mas prefiro não usá-la.

O que eu prefiro fazer é desvanecer temporariamente o formulário de filtro exposto (e, idealmente, a exibição principal também), usando uma animação jQuery. Eles voltariam a aparecer quando a chamada AJAX estiver concluída.

Caso contrário, eu gostaria de usar o mesmo método que o módulo de interface do usuário do Views quando está atualizando, ou seja, colocando este ícone no meio da página:

insira a descrição da imagem aqui

Como isso já está incorporado, presumi que haveria uma configuração em algum lugar para alterar o estilo / local desse comportamento de carregamento; não tenho tanta sorte.

Como faço para implementar um desses métodos?

Estou usando o Drupal 7 com vistas 7.x-3.3.

Clive
fonte
Mmmm ... projeto manhã :)
Lester Peabody
Em que período você precisa fazer isso?
Lester Peabody
@Lester Não estou com muita pressa, pois não é um bloqueador de lançamentos para nenhum dos projetos em que estou trabalhando ... mas devo admitir que está me incomodando! Eu raramente uso o Views e não tenho tempo (ou energia, francamente) para me envolver com ele em um nível mais baixo; mas agora que estou começando a direcionar meus esforços de comércio eletrônico para o Drupal Commerce, preciso ser capaz de fazer esse tipo de coisa. Se eu receber uma boa resposta durante o período de 7 dias, estarei na lua :)
Clive
Ei, acabei de criar meu módulo personalizado (com a página de administração de configurações) para estilizar o throbber de visualizações. Você ainda está interessado? Eu posso enviá-lo dentro de alguns dias em drupal.org
ANDiTKO
11
#random -: -o eu pensei que o @Clive tinha tudo a ver com respostas, você até faz perguntas;): D
SGhosh

Respostas:

42

Se você não se importa em usar um pequeno jquery, sempre pode fazer algo como:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});
Chance G
fonte
4
Sim, eu concordo com esta solução. Apenas observe que o jQuery ajaxSende ajaxCompletepode ser usado com condição if (settings.url == '/views/ajax') {//... }para mais controle.
Kalabro 18/05
Uau, eu realmente coisas complicadas demais, parece tão óbvio agora! Eu tive que anexar os eventos ao formulário do filtro em vez da visualização (caso contrário, ajaxSuccesssó é acionado uma vez; acho que porque o evento não é automaticamente vinculado ao substituído <div>), mas, além disso, isso é perfeito, sem mencionar a simplicidade da simplicidade. . Muito obrigado
Clive
@kalabro Obrigado novamente por sua ajuda, se eu pudesse dividir a recompensa entre isso e sua resposta, eu faria; mas eu tenho que escolher esse realmente, já que é quase um exemplo de pleno funcionamento :)
Clive
@Clive, estou muito feliz a solução encontrada :)
kalabro
11
A partir do jQuery 1.8, o método .ajaxSuccess () deve ser anexado apenas ao documento . Comparar o valor das configurações, conforme sugerido pelo kalabro acima, é o caminho a percorrer. fonte: api.jquery.com/ajaxSuccess
cjoy
29

Para completar, eis o código que acabei usando; esmaece o formulário de filtro exposto e a visualização quando o carregamento do AJAX começa e volta novamente quando termina:

(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);
Clive
fonte
Impressionante! Estou feliz que tenha funcionado para você.
Chance G
Como isso é feito no Drupal 6?
Ryan G
realmente grande, mas aplica-se apenas uma vez :)
Kojo
10

Olá, eu criei um módulo muito simples que dose exatamente o que você quer fazer. O módulo possui uma página de configuração onde você pode controlar o estilo do throbber e até fazer upload de suas próprias imagens sem hackers.

Este é o link da sandbox: http://drupal.org/sandbox/ANDiTKO/1556808

Se você achar útil, reveiw aqui, para que possa ser aprovado como projeto oficial: http://drupal.org/node/1556114

ANDiTKO
fonte
Que parece ótimo Muito obrigado :) Eu vou obtê-lo instalado e postar alguns comentários sobre a revisão quando eu tiver uma chance
Clive
6

Acabei de fazer uma pesquisa.
O throbberé codificado aqui no construtor de Drupal.views.ajaxView.
Uma instância de Drupal.views.ajaxViewnão está armazenada Drupal.ajaxe existe @todo .
Isso significa que não podemos entrar no objeto e definir nossos próprios parâmetros.

Como o Views faz?

A resposta curta é CSS.
A página de administração do Views apenas oculta throbber e adiciona estilo ao pai .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;
}

Posso fazer algo com o Drupal.ajax?

Sim, encontrei alguns métodos que você pode sobrescrever para elementos AJAX (botões, links, etc.). Eu mostrei um exemplo aqui: Como estender ou "prender" o Drupal Form AJAX? . Mas, neste caso, não será tão bom.
O elemento Progress está sendo exibido no beforeSendestágio, para que você possa fazer algo antes que isso aconteça.

kalabro
fonte
Muito obrigado pelas informações, mas não tenho certeza de como as utilizaria para resolver meu problema; você está dizendo que não é possível adicionar / alterar o comportamento padrão de carregamento do ajax do Views além do CSS, pelo menos sem invadir o módulo Views?
Clive
Quero dizer, você pode usar CSS, porque o Views também o usa. Apenas oculte .throbbere adicione alguns estilos a.ajax-progress-throbber
kalabro
OK, então o formulário de filtro exposto no bloco e a própria exibição obtêm uma classe de .ajax-progress-throbber quando qualquer AJAX é invocado? Devo admitir que não notei isso acontecendo, mas vou verificar. E você acha que vou conseguir invocar a animação jQuery em uma beforeSendfunção (com base na resposta à sua outra pergunta)? Obrigado, eu realmente não uso o Views e não me incomodo em cavar todo o caminho para descobrir todo o código para descobrir o que está acontecendo! Vou deixar você saber como eu vou continuar tentando
Clive
11
Algo a ter em mente para obter o efeito de desbotamento desejado nos elementos do formulário, você também pode utilizar Transições CSS em vez de animações jQuery, embora as animações jQuery funcionem em todos os navegadores e Transições CSS apenas na última geração.
Lester Peabody
Obrigado @Lester, prefiro usar o jQuery por enquanto. @kalabro infelizmente sua sugestão não funciona; nem a visualização nem o bloco de filtro exposto obtêm a .ajax-progress-throbberclasse aplicada a eles a qualquer momento, para que seu método não funcione. Obrigado por tentar
Clive