Як я можу реалізувати подання форми AJAX?

Моє завдання - надіслати контактну форму через AJAX, а потім показати "Дякую за подання!" повідомлення, завантажене в тому місці, де була форма. Тому мені потрібно відхилити існуючу контактну форму.

Я знайшов кілька прикладів того, як перевірити поля форм за допомогою AJAX у D8, але я не можу знайти приклад, як реалізувати подачу форми ajax та завантажувати деякий вміст через AJAX.

Як я можу реалізувати своє завдання? Як мені змінити контактну форму, щоб додати необхідну функціональність?

Працюючи з ajax у формах, ви повинні пам’ятати про наступні речі:

• знайте, чи ви перебудовуєте всю форму або лише її частину і оберніть форму відповідно елементом div, який має атрибут ID, який ви будете використовувати у визначенні #ajax на запускаючому елементі як "обгортка". Використовуйте для цього атрибути #prefix та #suffix ( $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';). Також майте на увазі, що якщо у вас є власний шаблон для вашої форми, щоб НЕ відображати префікс і суфікс у цьому випадку ( {{ form|without('#prefix', '#suffix') }}), інакше вони будуть виведені двічі - за вашим шаблоном, а також за допомогою обгортки теми форми. Ви не можете запобігти цьому, встановивши #theme_wrappers на порожній масив, оскільки шаблон форми містить фактичний елемент html форми.

• у вашому обробці програм для надсилання Ajax поверніть всю форму або частину її, яку ви обгорнули та хочете відновити ( return $formабо return $form['myelement']). Ви можете додатково використовувати команди ajax замість того, щоб просто повертати структуру форми, але це більш досконалі речі.

• зберігайте кожне значення у сховищі стану форми, поки ви не подасте форму. Зробіть це в обробці подання ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) і завжди дзвоніть, $form_state->setRebuild()якщо ви не виконуєте остаточного подання форми. Я вважаю за краще мати спеціально оброблені файли подачі, але мати більше логіки в основній обробці подачі теж добре.

• завжди використовуйте #nameатрибут на кнопці, яка робить подання, і якщо у вас є лише одна форма, обробник подачі використовує, $for_state->getTriggeringElement()['#name']щоб виявити, який елемент подав форму.

• якщо ви використовуєте 'тригер_as' у визначенні #ajax, якщо ви хочете, наприклад, надіслати форму з елементом select, завжди використовуйте те саме визначення #ajax, як і ви. На мій досвід, це потрібно - хоча це не зазначено в документації.

• використання #limit_validation_errorsможе бути дуже складним іноді, і з'ясувати, чому форма не працює, може зайняти досить багато часу, тому використовуйте її обережно (це добре для виокремлення помилок форми лише на тих елементах, які ви насправді перебудовуєте, щоб ваш код не впливає на інші частини форми).

• завжди використовуйте кнопки, щоб подати форму, і якщо ви хочете мати щось фантазійне, наприклад, вибравши як запускаючий елемент, скористайтеся опцією 'спуску_as' конфігурації #ajax та прихойте реальну кнопку з класом 'js-hid' для хорошого інтерфейсу.

• у визначенні форми отримайте значення за замовчуванням зі сховища стану форми, якщо вони існують, або призначте їх у сховище, якщо вони відсутні. Інакше форма не працює належним чином.

• не використовуйте $ this чи щось інше, до чого у вас немає доступу зовні, інакше це зламає аякс. завжди використовуйте статичні обробники ajax.

• нарешті, надіславши форму, залежно від того, що у вас (немає) спеціального обробника форми подання для ajax, вимкніть перебудову форми за допомогою виклику $form_state->setRebuild(FALSE).

• ви можете використовувати :: скорочені дзвінки в елементі подання ( $element['#ajax']['callback'] = '::ajaxFormRebuild';і $element['#submit'] = [['::ajaxFormSubmitHandler'];) ajax .

• зворотний виклик ajax суто для повернення відновленої форми або команд ajax. Ніколи не повертайте змінену форму (тобто не змінюйте масив форм у цьому зворотному дзвінку).

Щоб додати до цього контрольного списку, якщо ви відображаєте форму в модальному вікні, є ймовірність, що повідомлення про помилки не відображатимуться. Як сказав Іван Ярош, ви повинні переконатися, що у формі є обгортка:

$form['#prefix'] = '<div id="my-form-wrapper-id">';
$form['#suffix'] = '</div>';

Також вам потрібно буде додати наступне до елемента, який подає форму. У більшості випадків це кнопка подання:

$form['submit'] = [
    '#type' => 'submit',
    '#value' => $this->t('Save Changes'),
    '#attributes' => [
        'class' => [
            'btn',
            'btn-md',
            'btn-primary',
            'use-ajax-submit'
        ]
    ],
    '#ajax' => [
        'wrapper' => 'my-form-wrapper-id',
    ]
];

Я використовую модуль Contact ajax . Ще кілька деталей про нього (зі сторінки проекту):

Contact Ajax здійснює подачу ajax для форми контактів у Drupal 8.

Як це працює

Після ввімкнення модуля на кожній контактній формі з'явиться прапорець "Використовувати ajax". Якщо цей прапорець включений, контактна форма покаже вам інший варіант "Тип підтвердження" з цими параметрами:

• Завантажте форму: надішлемо форму без перезавантаження сторінки.
• Завантажити з користувацького повідомлення: завантажте користувацький текст.
• Завантажити з вузла: завантажте вузол після подання форми.

Цей модуль може допомогти вам, якщо:

• вам потрібно налаштувати повідомлення підтвердження
• вам потрібно надіслати контактну форму без перезавантаження сторінки.
• після подання форми потрібно завантажити власний текст або інший вузол.