nette.ajax.js

Para el marco Nette

Script de utilidad flexible para AJAX. Admite fragmentos, redirecciones, etc.

Licencia

MIT

Dependencias

jQuery 1.7

Instalación

1. Copie nette.ajax.js a su directorio con archivos Javascript (puede usar Bower para esto).
2. Vincula el archivo en tus plantillas (generalmente en app/@layout.latte , después de jQuery).
3. Ponga en algún lugar la rutina de inicialización:

 $ ( function ( ) {
	$ . nette . init ( ) ;
} ) ; 

Uso

De forma predeterminada, todos los enlaces y formularios con la clase CSS ajax se ajaxificarán instantáneamente. El comportamiento se puede modificar en la configuración de la extensión init . Objeto devuelto por la llamada var init = $.nette.ext('init'); tiene estos accesorios:

nombre	valor predeterminado	descripción
linkSelector	a.ajax	Selector CSS para enlaces
formSelector	form.ajax	Selector CSS para formularios
buttonSelector	input.ajax[type="submit"], input.ajax[type="image"]	Selector CSS para elementos de formulario responsables de enviar.

La ajaxificación seguramente hará click ( submit ) en el evento en el espacio de nombres nette . La ajaxificación de un enlace específico se puede cancelar con un código como este (aunque se mantendrán otras devoluciones de llamada):

 $ ( 'a.no-ajax' ) . off ( 'click.nette' ) ;

O incluso más simple:

 $ ( 'a.no-ajax' ) . netteAjaxOff ( ) ; 

Extensiones

La ajaxificación envuelve la llamada estándar $.ajax() y la extiende con varios eventos, que pueden conectarse con devoluciones de llamada personalizadas. El conjunto de devoluciones de llamada asociadas se llama extensión . Procesamiento de fragmentos, capacidad de cancelar la solicitud en ejecución mediante Escape ... toda esta funcionalidad se implementa en forma de extensiones. El registro de la extensión se ve así:

 $ . nette . ext ( 'name' , {
    event1 : function ( ) {
    } ,
    event2 : ...
} , {
    // ... shared context (this) of all callbacks
} ) ;

El primer argumento es el nombre. Es opcional.

El segundo argumento debe ser un hash de devoluciones de llamada con claves correspondientes a los nombres de los eventos. Estos eventos están disponibles:

nombre	argumentos	descripción
init		Llamado solo una vez durante $.nette.init(); llamar.
load	requestHandler	Debe contener ajaxificación. requestHandler se puede vincular a eventos de UI para iniciar una solicitud AJAX.
before	jqXHR , settings	Llamado inmediatamente antes de la ejecución de la solicitud AJAX. Si se devuelve FALSE, la solicitud no se iniciará.
start	jqXHR , settings	Se llama inmediatamente después del inicio de la solicitud AJAX.
success	payload , status , jqXHR , settings	Se llama después de completar exitosamente la solicitud AJAX. Equivalente a $.ajax( ... ).done( ...
complete	jqXHR , status , settings	Se llama después de completar cada solicitud AJAX. Equivalente a $.ajax( ... ).always( ...
error	jqXHR , status , error , settings	Llamado en caso de falla de la solicitud AJAX. Equivalente a $.ajax( ... ).fail( ...

La extensión se puede desactivar:

 $ . nette . ext ( 'name' , null ) ;

La extensión se puede configurar. Su contexto se puede adquirir mediante:

 var context = $ . nette . ext ( 'name' ) ; 

Extensiones predeterminadas

nombre	descripción
validation	Limita la ajaxificación a clics/envíos sin las teclas Ctrl , Alt o Shift , enlaces locales y envíos de formularios válidos.
forms	Agrega soporte para enviar formularios con todos los datos, nombre del botón en el que se hizo clic y coordenadas del clic en las entradas de [type=image] .
snippets	Actualiza DOM mediante matriz snippets en respuesta (manejo predeterminado de Nette de fragmentos de Latte).
redirect	Ejecuta el redireccionamiento a una URL diferente (cuando se llama $this->redirect() en el presentador). Puede ser reemplazado por una extensión history .
unique	Mantiene solo la solicitud ejecutándose al mismo tiempo.
abort	Permite al usuario cancelar la ejecución de la solicitud presionando Escape .
init	Ajaxificación predeterminada.

Trucos útiles

Todas estas características especiales esperan que todas las extensiones predeterminadas estén activadas.

data-ajax-off

El enlace o cualquier otro elemento ajaxificado puede tener un atributo de datos personalizado data-ajax-off . Contiene nombres de extensiones que deben desactivarse para la solicitud Ajax activada en el elemento.

 < a n:href =" do! " class =" ajax " data-ajax-off =" snippets " >

También puedes usarlo en $.nette.ajax() . Como esto:

 $ . nette . ajax ( {
	url : ... ,
	off : [ 'snippets' ]
} ) ;

data-ajax-pass (en extensión validation )

La ajaxificación del elemento garantiza que se llamará e.preventDefault() . Este atributo puede evitarlo, si necesita que se activen más devoluciones de llamada.

data-ajax-append (en extensión snippets )

El nuevo contenido del fragmento con este atributo no reemplazará el contenido antiguo, sino que se le agregará.

data-ajax-prepend (en extensión snippets )

El nuevo contenido del fragmento con este atributo no reemplazará el contenido antiguo, sino que se antepondrá a él.

data-ajax-validate (en extensión validation )

Hacer clic en el enlace o enviar el formulario se valida bajo diversas condiciones. Puedes cambiar cualquiera de ellos:

 < a n:href =" do! " class =" ajax " data-ajax-validate =' {"keys":false} ' >

Y como en el caso de data-ajax-off , puedes pasarlo directamente a $.nette.ajax() .

 $ . nette . ajax ( {
	url : ... ,
	validate : {
		keys : false
	}
} ) ;

Esto significa que al hacer clic en el enlace con Ctrl no se abrirá una nueva pestaña, pero se ajaxificará la solicitud.

Dependencia de otra extensión

En devoluciones de llamada de eventos, puede llamar this.ext() para obtener el contexto de otra extensión. Si agrega true como segundo argumento, la secuencia de comandos fallará si esa extensión no estará disponible.

 $ . nette . ext ( {
	success : function ( payload ) {
		var snippets = this . ext ( 'snippets' , true ) ;
		...
	}
} ) ;