nette.ajax.js

Para estrutura Nette

Script utilitário flexível para AJAX. Suporta snippets, redirecionamentos etc.

Licença

MIT

Dependências

jQuery 1.7

Instalação

1. Copie nette.ajax.js para o seu diretório com arquivos Javascript (você pode usar o Bower para isso).
2. Vincule o arquivo em seus modelos (geralmente em app/@layout.latte , após jQuery!).
3. Coloque em algum lugar a rotina de inicialização:

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

Uso

Por padrão, todos os links e formulários com classe CSS ajax serão instantaneamente ajaxificados. O comportamento pode ser alterado na configuração da extensão init . Objeto retornado pela chamada var init = $.nette.ext('init'); tem estes adereços:

nome	valor padrão	descrição
linkSelector	a.ajax	Seletor CSS para links
formSelector	form.ajax	Seletor CSS para formulários
buttonSelector	input.ajax[type="submit"], input.ajax[type="image"]	Seletor CSS para elementos de formulário responsáveis ​​pelo envio

Ajaxificação está vinculada ao evento click ( submit ) no namespace nette . Ajaxificação de link específico pode ser cancelada com código como este (enquanto outros retornos de chamada permanecerão):

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

Ou ainda mais simples:

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

Extensões

Ajaxificação envolve a chamada $.ajax() padrão e a estende com vários eventos, que podem ser conectados com retornos de chamada personalizados. O conjunto de retornos de chamada associados é chamado de ramal . Processamento de snippets, capacidade de cancelar solicitação em execução por Escape ... toda essa funcionalidade é implementada em forma de extensões. O registro da extensão é assim:

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

O primeiro argumento é o nome. É opcional.

O segundo argumento deve ser um hash de retornos de chamada com chaves correspondentes aos nomes dos eventos. Esses eventos estão disponíveis:

nome	argumentos	descrição
init		Chamado apenas uma vez durante $.nette.init(); chamar.
load	requestHandler	Deve conter ajaxificação. requestHandler pode ser vinculado a eventos de UI para iniciar uma solicitação AJAX.
before	jqXHR , settings	Chamado imediatamente antes da execução da solicitação AJAX. Se FALSE for retornado, a solicitação não será iniciada.
start	jqXHR , settings	Chamado imediatamente após o início da solicitação AJAX.
success	payload , status , jqXHR , settings	Chamado após a conclusão bem-sucedida da solicitação AJAX. Equivalente a $.ajax( ... ).done( ... .
complete	jqXHR , status , settings	Chamado após a conclusão de cada solicitação AJAX. Equivalente a $.ajax( ... ).always( ... .
error	jqXHR , status , error , settings	Chamado em caso de falha na solicitação AJAX. Equivalente a $.ajax( ... ).fail( ... .

A extensão pode ser desativada:

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

A extensão pode ser configurada. Seu contexto pode ser adquirido por:

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

Extensões padrão

nome	descrição
validation	Limita a ajaxificação a cliques/envios sem as teclas Ctrl , Alt ou Shift , links locais e envios de formulários válidos.
forms	Adiciona suporte para envio de formulários com todos os dados, nome do botão clicado e coordenadas do clique nas entradas [type=image] .
snippets	Atualiza o DOM por array snippets em resposta (manipulação Nette padrão de snippets Latte).
redirect	Executa o redirecionamento para URL diferente (quando $this->redirect() é chamado no presener). Pode ser substituído pela extensão history .
unique	Mantém apenas a solicitação em execução no mesmo momento.
abort	Permite ao usuário cancelar a execução da solicitação pressionando Escape .
init	Ajaxificação padrão.

Truques úteis

Todos esses recursos especiais exigem que todas as extensões padrão estejam ativadas.

data-ajax-off

Link ou qualquer outro elemento ajaxificado pode ter o atributo de dados personalizado data-ajax-off . Contém nomes de extensões, que devem ser desativadas para solicitação Ajax disparada no elemento.

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

Você também pode usá-lo em $.nette.ajax() . Assim:

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

data-ajax-pass (na extensão validation )

Ajaxificação do elemento garante que e.preventDefault() será chamado. Este atributo pode evitá-lo, se você precisar que mais retornos de chamada sejam disparados.

data-ajax-append (na extensão snippets )

O novo conteúdo do snippet com este atributo não substituirá o conteúdo antigo, mas será anexado a ele.

data-ajax-prepend (na extensão snippets )

O novo conteúdo do snippet com este atributo não substituirá o conteúdo antigo, mas será anexado a ele.

data-ajax-validate (na extensão validation )

O clique no link ou o envio do formulário é validado em diversas condições. Você pode alternar qualquer um deles:

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

E como no caso de data-ajax-off , você pode passá-lo diretamente para $.nette.ajax() .

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

Isso significa que clicar no link com Ctrl não abrirá uma nova guia, mas ajaxificará a solicitação.

Dependência de outra extensão

Em retornos de chamada de eventos, você pode chamar this.ext() para obter o contexto de outra extensão. Se você adicionar true como segundo argumento, o script falhará se essa extensão não estiver disponível.

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