Дополнительные функции AJAX

Вы можете добавить дополнительные CSS и JavaScript файлы при помощи {% framework extras %} на страницу, чтобы использовать расширенные возможности AJAX фреймворка.

# Индикатор загрузки

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

Перед выполнением AJAX запроса срабатывает событие ajaxPromise, которое отображает индикатор загрузки наверху страницы и меняет внешний вид курсора. События ajaxFail иajaxDone используются для того, чтобы определить выполнился ли запрос и скрыть индикатор загрузки.

# Валидация формы

Добавьте атрибут data-request-validate в тег form, чтобы использовать валидацию.

<form
    data-request="onSubmit"
    data-request-validate>
    <!-- ... -->
</form>

# Обработка исключений

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

function onSubmit()
{
    throw new ValidationException(['name' => 'You must give a name!']);
}

Note: You can also pass an instance of the validation service as the first argument of the exception.

# Отображение сообщений об ошибках

Используйте тег с атрибутом data-validate-error внутри формы для отображения первого сообщения об ошибке.

<div data-validate-error></div>

Используйте тег с атрибутом data-message для отображения всех ошибок.

<div class="alert alert-danger" data-validate-error>
    <p data-message></p>
</div>

Вы можете использовать события ajaxInvalidField и ajaxPromise, чтобы добавить свои классы при валидации элементов.

$(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) {
    $(fieldElement).closest('.form-group').addClass('has-error');
});

$(document).on('ajaxPromise', '[data-request]', function() {
    $(this).closest('form').find('.form-group.has-error').removeClass('has-error');
});

# Отображение ошибок рядом с полями

Используйте тег с атрибутом data-validate-for, чтобы отобразить ошибку рядом с полем.

<!-- Input field -->
<input name="phone" />

<!-- Validation message for the field -->
<div data-validate-for="phone"></div>

Если содержимое элемента пустое, то отобразится сообщение, которое пришло с сервера. Но Вы также можете указать произвольный текст.

<div data-validate-for="phone">
    Oops.. phone number is invalid!
</div>

# Индикатор загрузки на кнопке

Если элемент содержит атрибут data-attach-loading, то во время выполнения AJAX запроса у него появится класс oc-loading.

<form data-request="onSubmit">
    <button data-attach-loading>
        Submit
    </button>
</form>

<a
    href="#"
    data-request="onDoSomething"
    data-attach-loading>
    Do something
</a>

# Flash сообщения

Используйте атрибут data-request-flash в элементе формы

<form
    data-request="onSuccess"
    data-request-flash>
    <!-- ... -->
</form>

и фасад Flash в обработчике

function onSuccess()
{
    Flash::success('You did it!');
}

для отображения флэш-сообщений при успешном выполнении AJAX запроса.

Вы можете отобразить стандартное флэш-сообщение при загрузке страницы при помощи следующего кода на странице или макете.

{% flash %}
    <p
        data-control="flash-message"
        class="flash-message fade {{ type }}"
        data-interval="5">
        {{ message }}
    </p>
{% endflash %}

# Примеры

Пример валидации формы.

<form
    data-request="onDoSomething"
    data-request-validate
    data-request-flash>

    <div>
        <input name="name" />
        <span data-validate-for="name"></span>
    </div>

    <div>
        <input name="email" />
        <span data-validate-for="email"></span>
    </div>

    <button data-attach-loading>
        Submit
    </button>

    <div class="alert alert-danger" data-validate-error>
        <p data-message></p>
    </div>

</form>

function onDoSomething()
{
    $data = post();

    $rules = [
        'name' => 'required',
        'email' => 'required|email',
    ];

    $validation = Validator::make($data, $rules);

    if ($validation->fails()) {
        throw new ValidationException($validation);
    }

    Flash::success('Jobs done!');
}

19.02.2019