AJAX data-* атрибуты API (AJAX Data attributes API)

# data-* атрибуты API

Data-* атрибуты позволяют Вам использовать AJAX без JavaScript. Вы пишете меньше кода, а получаете такой же результат. Список атрибутов:

Атрибут	Описание
data-request	имя AJAX обработчика.
data-request-confirm	сообщение с подтверждением. Окно показывается до того, как запрос будет отправлен. Если пользователь нажмет "Отмена", то запрос не будет отправлен.
data-request-redirect	после того, как запрос будет успешно отправлен, пользователь перейдет на эту страницу.
data-request-url	URL, на который будет отправлен запрос. По умолчанию: `window.location.href`
data-request-update	список фрагментов и элементов страницы (CSS селекторы), которые нужно обновить. Пример: `'my-partial': '#selector', 'partial': '@#selector2', 'partial': '^#selector2'`. `@` - добавить результат перед содержимым элемента, `^` - после.
data-request-data	дополнительные параметры для передачи. Формат записи: `var: value, var: value`. При необходимости используйте кавычки: `myvar: 'some string'`. Вы можете использовать данный атрибут на инициирующем элементе, например, на кнопке, на родительском элементе и на форме. Все атрибуты будут объединены в один массив. Если разные элементы будут иметь одинаковый атрибут, то в массив сохранится значение, которое ближе всего к инициирующему элементу.
data-request-before-update	JavaScript код, который необходимо выполнить до обновления содержимого элемента. Доступные переменные: `this`, `context`, `data`, `textStatus`,`jqXHR`.
data-request-success	JavaScript код, который необходимо выполнить после того, как запрос будет успешно завершен. Доступные переменные: `this`, `context`, `data`, `textStatus`, `jqXHR`.
data-request-error	JavaScript код, который выполняется при возникновении ошибки. Доступные переменные: `this`, `context`, `textStatus`, `jqXHR`.
data-request-complete	JavaScript код, который выполняется после окончания запроса. Доступные переменные: `this`, `context`, `textStatus`, `jqXHR`.
data-request-loading	CSS селектор элемента, который будет показан во время выполнения запроса. Вы можете использовать эту опцию для отображения индикатора загрузки. Эта функция использует jQuery функции `show()` и `hide()` для управления видимостью элемента.
data-request-form	CSS селектор формы, которая будет использоваться для получения данных. Если значение не указано, то используется ближайшая форма к инициирующему элементу.
data-request-flash	указывает серверу очистить и отправить флеш-сообщение с полученым результатом.
data-request-files	разрешает загружать файлы.
data-track-input	применяется для тега `input` типа `text` или `password` и вызывает обработчик при изменении значения пользователем. Имеет необязательный параметр - время до отправления запроса (в миллисекундах).

Атрибут data-request можно использовать в:

Элемент	Событие
Форма	при отправке.
Ссылка, кнопка	при нажатии.
Поле типа `text`, `number` и `password`	когда изменяется значение и добавлен атрибут `data-track-input`.
Select, checkboxes, radios	когда выбран один из элементов.

# Примеры

Использование обработчика onCalculate при отправке формы и обновлением элемента, имеющего идентификатор "result", фрагментом calcresult:

<form data-request="onCalculate" data-request-update="calcresult: '#result'">

Вызов окна с подтверждением запроса:

<form ... >
    ...
    <button data-request="onDelete" data-request-confirm="Are you sure?">Delete</button>

Перенаправление на другую страницу после успешного запроса:

<form data-request="onLogin" data-request-redirect="/admin">

Вызов окна после успешного запроса:

<form data-request="onLogin" data-request-success="alert('Yay!')">

Отправка параметра mode со значением update:

<form data-request="onUpdate" data-request-data="mode: 'update'">

Отправка параметра id со значением 7:

<div data-request-data="id: 7">
    <button data-request="onDelete">Delete</button>
    <button data-request="onSave">Update</button>
</div>

Загрузка файлов:

<form data-request="onSubmit" data-request-files>
    <input type="file" name="photo" accept="image/*" />
    <button type="submit">Submit</button>
</form>

15.02.2019

← Медиа Менеджер Дополнительные функции AJAX →