Автоматическая отправка

Unpoly предоставляет механизм автоматической отправки форм и ссылок, что позволяет улучшить взаимодействие с пользователем без необходимости вручную инициировать отправку запросов. Этот подход помогает создавать более динамичные и интерактивные страницы, где действия пользователя приводят к обновлению контента, не требуя при этом полного перезагрузки страницы.

Автоматическая отправка форм

Одной из ключевых возможностей Unpoly является автоматическая отправка форм. Это упрощает взаимодействие с формами, позволяя отправлять данные без необходимости нажатия кнопки отправки. Это особенно полезно в ситуациях, когда форма должна быть отправлена при изменении значений полей, например, в поисковых формах или при изменении параметров фильтрации.

Unpoly позволяет настроить автоматическую отправку с помощью атрибута up-auto-submit для элемента формы. Когда этот атрибут добавлен к форме, отправка будет происходить при любом изменении значений полей формы.

Пример:

<form action="/search" up-auto-submit>
  <input type="text" name="query" placeholder="Поиск...">
  <input type="submit" value="Поиск">
</form>

В этом примере форма будет отправляться автоматически, как только пользователь начнёт вводить запрос в поле поиска. Это позволяет мгновенно отобразить результаты поиска без необходимости дополнительного клика по кнопке отправки.

Автоматическая отправка ссылок

Ссылки, помеченные специальным атрибутом up-auto-submit, могут автоматически инициировать запрос при взаимодействии пользователя с элементом. Это часто используется для обновления данных на странице или выполнения действия, которое не требует подтверждения со стороны пользователя.

Чтобы ссылка стала «автоматической» для отправки запроса, необходимо просто добавить атрибут up-auto-submit:

<a href="/update" up-auto-submit>Обновить</a>

Когда пользователь кликнет на эту ссылку, Unpoly автоматически отправит запрос без необходимости загрузки новой страницы. Это особенно полезно для создания динамичных интерфейсов, где нужно обновлять содержимое на странице в ответ на действия пользователя.

Синхронизация с сервером

При автоматической отправке важно правильно обрабатывать ответы сервера. Unpoly может использовать AJAX-запросы для отправки данных на сервер и получения ответов без перезагрузки страницы. В большинстве случаев ответы от сервера содержат обновлённый HTML или данные, которые будут использованы для обновления части страницы.

Для интеграции с сервером можно использовать стандартный механизм обработки данных через атрибут up-target. Этот атрибут указывает на элемент страницы, который должен быть обновлён в случае успешной отправки запроса.

Пример:

<form action="/update" method="POST" up-target="#content">
  <input type="text" name="text" value="New content">
  <input type="submit" value="Отправить">
</form>

<div id="content">
  Содержимое будет обновлено.
</div>

Когда форма отправляется, только часть, указанная в up-target, будет обновлена, что позволяет избежать полной перезагрузки страницы.

Обработка ошибок при автоматической отправке

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

Unpoly предоставляет средства для работы с ошибками при автоматической отправке запросов. С помощью метода up.error() можно определить, что делать при возникновении ошибки.

Пример обработки ошибок:

up.error((event) => {
  alert('Произошла ошибка при отправке данных');
});

Этот код позволит отобразить уведомление о возникшей ошибке, если запрос завершился неудачей.

Синхронизация с другими событиями

Автоматическая отправка может быть синхронизирована с другими событиями на странице. Например, форма может быть автоматически отправлена, когда пользователь завершает редактирование в текстовом поле или выбирает опцию в выпадающем списке.

Для этого можно использовать различные события JavaScript, такие как input, change или blur, чтобы инициировать отправку данных.

Пример:

<form action="/update" method="POST" up-auto-submit>
  <input type="text" name="text" onin put="up.submit(this.form)">
  <input type="submit" value="Отправить">
</form>

В этом примере отправка формы будет происходить всякий раз, когда пользователь будет изменять текст в поле ввода.

Отключение автоматической отправки

В некоторых случаях необходимо отключить автоматическую отправку форм или ссылок. Unpoly предоставляет удобный способ управления этим поведением, позволяя включать и отключать автоматическую отправку с помощью JavaScript.

Для того чтобы отключить автоматическую отправку на элементе, можно использовать метод up.disable():

up.disable('#myForm');

После этого форма с идентификатором #myForm больше не будет автоматически отправляться. В случае необходимости повторного включения можно использовать метод up.enable():

up.enable('#myForm');

Заключение

Автоматическая отправка в Unpoly значительно упрощает создание динамичных и интерактивных интерфейсов. Этот механизм позволяет отправлять формы и запросы без необходимости вручную инициировать действия, что улучшает пользовательский опыт и ускоряет взаимодействие с веб-приложением. Правильная настройка автоматической отправки, а также обработка ошибок и синхронизация с другими событиями на странице, делает использование Unpoly удобным и мощным инструментом для разработки современных веб-приложений.

Оглавление