nette.ajax.js

Для Нетте Фреймворк

Гибкий скрипт-утилита для AJAX. Поддерживает фрагменты, перенаправления и т. д.

Лицензия

Массачусетский технологический институт

Зависимости

jQuery 1.7

Установка

1. Скопируйте nette.ajax.js в свой каталог с файлами Javascript (для этого вы можете использовать Bower).
2. Свяжите файл в своих шаблонах (обычно в app/@layout.latte после jQuery!).
3. Поместите куда-нибудь процедуру инициализации:

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

Использование

По умолчанию все ссылки и формы с CSS-классом ajax будут мгновенно аяксифицированы. Поведение можно изменить в конфигурации расширения init . Объект, возвращаемый вызовом var init = $.nette.ext('init'); есть такие реквизиты:

имя	значение по умолчанию	описание
linkSelector	a.ajax	CSS-селектор для ссылок
formSelector	form.ajax	CSS-селектор для форм
buttonSelector	input.ajax[type="submit"], input.ajax[type="image"]	CSS-селектор для элементов формы, отвечающих за отправку

Ajaxification обязан click ( submit ) событие в пространстве имен nette . Аяксификацию конкретной ссылки можно отменить с помощью такого кода (остальные обратные вызовы останутся):

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

Или еще проще:

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

Расширения

Аяксификация охватывает стандартный вызов $.ajax() и расширяет его несколькими событиями, которые можно перехватить с помощью пользовательских обратных вызовов. Набор связанных обратных вызовов называется расширением . Обработка сниппетов, возможность отмены запущенного запроса с помощью Escape ... весь этот функционал реализован в виде расширений. Регистрация расширения выглядит так:

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

Первый аргумент — имя. Это необязательно.

Вторым аргументом должен быть хеш обратных вызовов с ключами, соответствующими названиям событий. Доступны следующие события:

имя	аргументы	описание
init		Вызывается только один раз во время $.nette.init(); вызов.
load	requestHandler	Должен содержать аяксификацию. requestHandler может быть привязан к событиям пользовательского интерфейса для инициирования запроса AJAX.
before	jqXHR , settings	Вызывается непосредственно перед выполнением запроса AJAX. Если возвращается FALSE, запрос не запустится.
start	jqXHR , settings	Вызывается сразу после запуска AJAX-запроса.
success	payload , status , jqXHR , settings	Вызывается после успешного завершения запроса AJAX. Эквивалент $.ajax( ... ).done( ... .
complete	jqXHR , status , settings	Вызывается после завершения каждого запроса AJAX. Эквивалентно $.ajax( ... ).always( ... .
error	jqXHR , status , error , settings	Вызывается в случае сбоя запроса AJAX. Эквивалентно $.ajax( ... ).fail( ... .

Расширение можно отключить:

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

Расширение можно настроить. Его контекст можно получить следующим образом:

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

Расширения по умолчанию

имя	описание
validation	Ограничивает ajaxification кликами/отправками без клавиш Ctrl , Alt или Shift , локальными ссылками и допустимыми отправками форм.
forms	Добавляет поддержку отправки форм со всеми данными, именем нажатой кнопки и координатами щелчка во входных данных [type=image] .
snippets	Обновляет DOM по массиву snippets в ответ (обработка фрагментов Latte по умолчанию).
redirect	Выполняет перенаправление на другой URL-адрес (когда в презентаторе вызывается $this->redirect() ). Может быть заменен расширением history .
unique	В один и тот же момент остается только запущенный запрос.
abort	Позволяет пользователю прервать выполнение запроса, нажав Escape .
init	Аяксификация по умолчанию.

Полезные трюки

Все эти специальные функции предполагают, что все расширения по умолчанию включены.

data-ajax-off

Ссылка или любой другой ajaxified элемент может иметь собственный атрибут данных data-ajax-off . Он содержит имена расширений, которые следует деактивировать для запроса Ajax, запущенного к элементу.

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

Вы также можете использовать его в $.nette.ajax() . Так:

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

data-ajax-pass (в расширении validation )

Аяксификация элемента гарантирует, что будет вызван e.preventDefault() . Этот атрибут может предотвратить это, если вам нужно запустить больше обратных вызовов.

data-ajax-append (в расширении snippets )

Новое содержимое фрагмента с этим атрибутом не заменит старое содержимое, а будет добавлено к нему.

data-ajax-prepend (в расширении snippets )

Новое содержимое фрагмента с этим атрибутом не заменит старое содержимое, а будет добавлено к нему.

data-ajax-validate (в расширении validation )

Нажмите на ссылку или отправка формы подтверждается различными условиями. Вы можете переключить любой из них:

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

И, как и в случае с data-ajax-off , вы можете передать его прямо в $.nette.ajax() .

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

Это означает, что нажатие ссылки с помощью Ctrl не откроет новую вкладку, но запрос будет ajaxify.

Зависимость от другого расширения

В обратных вызовах событий вы можете вызвать this.ext() чтобы получить контекст другого расширения. Если вы добавите true в качестве второго аргумента, сценарий завершится ошибкой, если это расширение не будет доступно.

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