Jak mogę wdrożyć przesyłanie formularza AJAX?

Moim zadaniem jest przesłanie formularza kontaktowego za pośrednictwem AJAX, a następnie pokazanie „Dziękujemy za przesłanie!” wiadomość załadowana w miejscu, w którym znajdował się formularz. Więc muszę skompilować istniejący formularz kontaktowy.

Znalazłem kilka przykładów sprawdzania poprawności pól formularza za pomocą AJAX w D8, ale nie mogę znaleźć żadnego przykładu, jak zaimplementować przesłanie formularza ajax i załadować trochę treści przez AJAX.

Jak mogę zrealizować swoje zadanie? Jak zmienić formularz kontaktowy, aby dodać wymaganą funkcjonalność?

Podczas pracy z ajaxem w formularzach należy pamiętać o następujących rzeczach:

• wiedz, czy przebudowujesz cały formularz, czy tylko jego część, i odpowiednio zawiń formularz elementem div , który ma atrybut ID , którego użyjesz w definicji #ajax elementu wyzwalającego jako „opakowanie”. W tym celu użyj atrybutów #prefix i #suffix $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';. Należy również pamiętać, że jeśli masz niestandardowy szablon formularza, aby NIE renderował prefiksu i sufiksu w tym przypadku ( {{ form|without('#prefix', '#suffix') }}), w przeciwnym razie zostaną one renderowane dwukrotnie - przez szablon, a także przez opakowanie motywu formularza. Nie można temu zapobiec, ustawiając #theme_wrappers na pustą tablicę, ponieważ szablon formularza zawiera rzeczywisty element HTML formularza.

• w swoim handlerze ajax prześlij, zwróć całą formę lub jej część, którą zapakowałeś i chcesz ją odbudować ( return $formlub return $form['myelement']). Możesz dodatkowo użyć komend ajax zamiast po prostu zwracać strukturę formularza, ale jest to bardziej zaawansowana funkcja.

• przechowuj każdą wartość w pamięci stanu formularza do momentu przesłania formularza. Zrób to w handlerach wysyłających ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) i zawsze wywołuj, $form_state->setRebuild()jeśli nie przesyłasz ostatecznego formularza. Wolę mieć niestandardowe procedury obsługi przesyłania, ale posiadanie większej logiki w podstawowej procedurze przesyłania jest również w porządku.

• zawsze używaj #nameatrybutu na przycisku, który wykonuje przesyłanie, a jeśli masz tylko jeden formularz, użyj obsługi $for_state->getTriggeringElement()['#name']modułu obsługi do wykrycia, który element przesłał formularz.

• jeśli używasz „trigger_as” w definicji #ajax, na przykład, jeśli chcesz przesłać formularz z elementem select, zawsze używaj tej samej definicji #ajax jak na przycisku. Z mojego doświadczenia wynika, że ​​jest to wymagane - choć nie zostało to określone w dokumentacji.

• używanie #limit_validation_errorsmoże być czasem bardzo trudne i ustalenie, dlaczego formularz nie działa, może zająć sporo czasu, więc używaj go ostrożnie (jest to dobre do izolowania błędów formularza tylko na elementach, które faktycznie przebudowujesz, tak aby Twój kod nie wpływa na inne części formularza).

• zawsze używaj przycisków do przesłania formularza, a jeśli chcesz mieć coś wymyślnego, np. wybierz element wyzwalający, użyj opcji „trigger_as” w konfiguracji #ajax i ukryj prawdziwy przycisk za pomocą klasy „js-hide”, aby uzyskać dobry interfejs użytkownika.

• w definicji formularza pobierz wartości domyślne z pamięci stanu formularza, jeśli istnieją, lub przypisz je do pamięci, jeśli nie istnieją. W przeciwnym razie formularz nie będzie działał poprawnie.

• nie używaj $ this ani czegokolwiek innego, do czego nie masz dostępu z zewnątrz, w przeciwnym razie spowoduje to uszkodzenie ajax. zawsze używaj statycznych programów obsługi ajax.

• kiedy w końcu przesyłasz formularz, w zależności od tego, czy masz (nie) niestandardową procedurę obsługi przesyłania formularza dla ajax, wyłącz przebudowywanie formularza przez wywołanie $form_state->setRebuild(FALSE).

• możesz użyć wywołań :: shorthand w elemencie ajax ajax ( $element['#ajax']['callback'] = '::ajaxFormRebuild';i $element['#submit'] = [['::ajaxFormSubmitHandler'];).

• wywołanie zwrotne ajax służy wyłącznie do zwrócenia przebudowanej formy lub poleceń ajax. Nigdy nie zwracaj zmienionej formy (tj. Nie zmieniaj tablicy formularzy w tym wywołaniu zwrotnym).

Aby dodać do tej listy kontrolnej, jeśli wyświetlasz formularz w oknie modalnym, istnieje możliwość, że komunikaty o błędach nie zostaną wyświetlone. Jak powiedział Ivan Jaros, musisz upewnić się, że formularz ma opakowanie:

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

Musisz także dodać następujące elementy do elementu przesyłającego formularz. W większości przypadków byłby to Twój przycisk przesyłania:

$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',
    ]
];

Korzystam z modułu Kontakt ajax . Kilka dodatkowych szczegółów na ten temat (ze strony projektu):

Kontakt Ajax implementuje przesłanie ajax dla formularza kontaktowego w Drupal 8.

Jak to działa

Po włączeniu modułu każdy formularz kontaktowy pokaże pole wyboru „Użyj ajax”. Gdy to pole wyboru jest zaznaczone, formularz kontaktowy wyświetli inną opcję „Typ potwierdzenia” z następującymi opcjami:

• Załaduj formularz: wyśle ​​formularz bez przeładowania strony.
• Załaduj z niestandardowej wiadomości: załaduj własny tekst.
• Załaduj z węzła: załaduj węzeł po przesłaniu formularza.

Ten moduł może ci pomóc, jeśli:

• musisz dostosować komunikat potwierdzający
• musisz przesłać formularz kontaktowy bez ponownego ładowania strony.
• chcesz załadować niestandardowy tekst lub inny węzeł po przesłaniu formularza.