¿Cómo cambio el comportamiento de carga de ajax en Vistas?

34

Tengo una vista con algunos filtros expuestos en un bloque; utiliza AJAX y la función de envío automático para que la vista se vuelva a cargar tan pronto como se cambie una opción de filtro.

En el breve retraso entre la selección de una opción y la recarga de la vista, el conocido acelerador azul AJAX se muestra en algún lugar en la parte inferior del formulario (creo que actualmente se encuentra el botón de envío oculto).

Sé que puedo personalizar esta imagen anulando el CSS para el elemento throbber, pero preferiría no usarlo en absoluto.

Lo que preferiría hacer es desvanecer temporalmente el formulario de filtro expuesto (e idealmente también la vista principal), utilizando una animación jQuery. Luego se desvanecerían cuando la llamada AJAX se complete.

De lo contrario, me gustaría utilizar el mismo método que utiliza el módulo de la interfaz de usuario de Vistas cuando se actualiza, es decir, colocar este icono en el medio de la página:

ingrese la descripción de la imagen aquí

Como eso ya está incorporado, supuse que habría una configuración en algún lugar para cambiar el estilo / ubicación de este comportamiento de carga; sin embargo, no tuve tanta suerte.

¿Cómo implemento cualquiera de estos métodos?

Estoy usando Drupal 7 con Vistas 7.x-3.3.

Clive
fuente
Mmmm ... proyecto de la mañana :)
Lester Peabody
¿Cuál es el período de tiempo en el que necesita que se haga esto?
Lester Peabody
@Lester No tengo mucha prisa, ya que no es un bloqueador de lanzamiento para ninguno de los proyectos en los que estoy trabajando ... ¡pero debo admitir que me está molestando! Raramente uso Vistas y no tengo el tiempo (o la energía, francamente) para involucrarme en un nivel inferior; pero como ahora estoy empezando a transferir mis esfuerzos de comercio electrónico a Drupal Commerce, necesito poder hacer este tipo de cosas. Si recibo una buena respuesta durante el período de recompensa de 7 días, estaré en la luna :)
Clive
Hola, acabo de terminar de crear mi módulo personalizado (con la página de configuración de administrador) para diseñar el throbber de vistas. ¿Estás interesado aún? Puedo subirlo en pocos días en drupal.org
ANDiTKO
1
#random -: -o Pensé que @Clive tenía que ver con respuestas, incluso haces preguntas;): D
SGhosh

Respuestas:

42

Si no te importa usar un poco de jquery, siempre puedes hacer algo como:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});
Oportunidad G
fuente
44
Sí, estoy de acuerdo con esta solución. Solo tenga en cuenta que jQuery ajaxSendy ajaxCompletepuede usarse con condición if (settings.url == '/views/ajax') {//... }para un mayor control.
kalabro
¡Vaya, realmente he complicado demasiado las cosas, parece tan obvio ahora! Tuve que adjuntar los eventos al formulario de filtro en lugar de la vista (de lo contrario, ajaxSuccesssolo se dispara una vez; supongo que porque el evento no se vuelve a vincular automáticamente al reemplazado <div>), pero aparte de eso, esto es perfecto, sin mencionar que es maravillosamente simple . Muchas gracias
Clive
@kalabro Gracias de nuevo por tu ayuda con esto, si pudiera dividir la recompensa entre esto y tu respuesta, lo haría; pero tengo que ir a este realmente ya que es casi un ejemplo completamente funcional :)
Clive
@Clive, estoy muy feliz de encontrar la solución :)
kalabro
1
A partir de jQuery 1.8, el método .ajaxSuccess () solo debe adjuntarse al documento . Comparar el valor de la configuración, como lo sugiere kalabro arriba, es el camino a seguir. fuente: api.jquery.com/ajaxSuccess
cjoy
29

En aras de la integridad, aquí está el código que terminé usando; se desvanece tanto la forma del filtro expuesto como la vista cuando comienza la carga AJAX, y vuelve a entrar cuando 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
fuente
¡Increíble! Me alegra que te haya funcionado.
Chance G
¿Cómo se hace esto en Drupal 6?
Ryan G
realmente genial, pero solo se aplica una vez :)
Kojo
10

Hola, he creado un módulo muy simple que dosifica exactamente lo que quieres hacer. El módulo tiene una página de configuración donde puede controlar el estilo del throbber e incluso cargar sus propias imágenes sin ningún tipo de piratería.

Este es el enlace de sandbox: http://drupal.org/sandbox/ANDiTKO/1556808

Si lo encuentra útil, revísela aquí para que pueda ser aprobado como proyecto oficial: http://drupal.org/node/1556114

ANDiTKO
fuente
Eso se ve genial, muchas gracias :) Lo instalaré y publicaré algunos comentarios sobre la revisión cuando tenga la oportunidad
Clive
6

Acabo de hacer una investigación.
El throbberestá codificado aquí en el constructor de Drupal.views.ajaxView.
Una instancia de Drupal.views.ajaxViewno se almacena Drupal.ajaxy hay al @todo respecto.
Significa que no podemos entrar en el objeto y establecer nuestros propios parámetros.

¿Cómo funciona Vistas?

La respuesta corta es CSS.
La página de administración de Views solo se esconde throbber y agrega estilo a su padre .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;
}

¿Puedo hacer algo con Drupal.ajax?

Sí, encontré algunos métodos que puede sobrescribir para elementos AJAX (botones, enlaces, etc.). He mostrado un ejemplo aquí: ¿Cómo extender o "enganchar" el Drupal Form AJAX? . Pero en este caso no será tan bueno.
El elemento de progreso se muestra en el beforeSendescenario, por lo que puede hacer algo antes de que suceda.

kalabro
fuente
Muchas gracias por la información, pero no estoy seguro de cómo la usaría para resolver mi problema; ¿Está diciendo que no es posible agregar / cambiar el comportamiento predeterminado de carga de Vistas ajax más allá de CSS, al menos sin hackear el módulo de Vistas?
Clive
Quiero decir, puedes usar CSS, porque Views también lo usa. Solo oculta .throbbery agrega algunos estilos a.ajax-progress-throbber
kalabro
OK, entonces, tanto el filtro expuesto en el bloque como la vista en sí, ¿obtienen una clase de .ajax-progress-throbbercuando se invoca cualquier AJAX? Debo admitir que no he notado que eso sucedió, pero lo comprobaré. ¿Y cree que podré invocar la animación jQuery en una beforeSendfunción (basada en la respuesta a su otra pregunta)? ¡Gracias, realmente no uso Vistas y no puedo molestarme en profundizar en cada fragmento de código para descubrir qué está sucediendo! Te contaré cómo sigo intentándolo
Clive
1
Algo a tener en cuenta para lograr el efecto de desvanecimiento que desea en los elementos del formulario, también puede utilizar Transiciones CSS en lugar de animaciones jQuery, aunque las animaciones jQuery funcionarán en todos los navegadores y Transiciones CSS solo en la última generación.
Lester Peabody
Gracias @Lester, prefiero usar jQuery por el momento. @kalabro desafortunadamente su sugerencia no funciona; ni la vista, ni el bloque de filtro expuesto, .ajax-progress-throbberaplican la clase a ellos en ningún momento para que su método no funcione. Sin embargo, gracias por intentarlo
Clive