Come posso implementare l'invio del modulo AJAX?

Il mio compito è di inviare il modulo di contatto tramite AJAX e quindi mostrare "Grazie per l'invio!" messaggio, caricato nel posto in cui si trovava il modulo. Quindi ho bisogno di ajaxificare il modulo di contatto esistente.

Ho trovato alcuni esempi su come convalidare i campi modulo utilizzando AJAX in D8, ma non riesco a trovare alcun esempio su come implementare l' invio di moduli ajax e caricare alcuni contenuti tramite AJAX.

Come posso implementare il mio compito? Come devo modificare il modulo di contatto per aggiungere la funzionalità richiesta?

Quando lavori con ajax nei moduli devi tenere presente quanto segue:

• sapere se si sta ricostruendo l'intero modulo o solo una parte di esso e avvolgere il modulo di conseguenza con l' elemento div con l' attributo ID che verrà utilizzato nella definizione #ajax sull'elemento di attivazione come "wrapper". Usa gli attributi #prefix e #suffix per questo ( $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';). Inoltre, tieni presente che se hai un modello personalizzato per il tuo modulo NON renderizzare il prefisso e il suffisso in questo caso ( {{ form|without('#prefix', '#suffix') }}) altrimenti verranno visualizzati due volte - dal tuo modello e anche dal wrapper del tema del modulo. Non è possibile impedirlo impostando #theme_wrappers su un array vuoto poiché il modello di modulo contiene l'elemento html del modulo effettivo.

• nel tuo gestore di invio ajax, restituisci l'intero modulo o parte di esso che hai spostato e desideri ricostruire ( return $formo return $form['myelement']). È inoltre possibile utilizzare i comandi Ajax invece di restituire solo la struttura del modulo, ma si tratta di elementi più avanzati.

• archiviare tutti i valori nella memoria dello stato del modulo fino a quando non si invia il modulo. Fallo nel gestore di invio ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) e chiama sempre $form_state->setRebuild()se non stai inviando il modulo finale. Preferisco avere gestori di invio personalizzati, ma avere più logica nel gestore di invio primario è del tutto ok.

• utilizzare sempre l' #nameattributo sul pulsante che sta eseguendo l'invio e se si dispone di un solo gestore di invio modulo, utilizzare $for_state->getTriggeringElement()['#name']per rilevare quale elemento ha inviato il modulo.

• se stai usando 'trigger_as' nella definizione #ajax, nel caso in cui desideri inviare il modulo con l'elemento select, ad esempio, usa sempre la stessa definizione #ajax come fai sul pulsante. Nella mia esperienza è necessario - sebbene non indicato nella documentazione.

• l'uso #limit_validation_errorspuò diventare molto complicato a volte e per capire perché il modulo non funziona può richiedere parecchio tempo, quindi usalo attentamente (questo è utile per isolare gli errori del modulo solo sugli elementi che stai effettivamente ricostruendo in modo che il tuo codice non influenza altre parti del modulo).

• usa sempre i pulsanti per inviare il modulo e se vuoi avere qualcosa di elegante, come selezionare l'elemento di attivazione, usa l'opzione 'trigger_as' della configurazione #ajax e nascondi il pulsante reale con la classe 'js-hide' per una buona interfaccia utente.

• nella definizione del modulo, ottenere i valori predefiniti dalla memoria dello stato del modulo se esistono o assegnarli alla memoria in caso contrario. Altrimenti il ​​modulo non funzionerà correttamente.

• non usare $ this o qualsiasi altra cosa a cui non hai accesso esternamente, altrimenti si romperà la ajax. utilizzare sempre gestori statici ajax.

• quando infine si invia il modulo, a seconda del fatto che non si dispone di un gestore di invio di moduli personalizzati per ajax, disabilitare la ricostruzione del modulo chiamando $form_state->setRebuild(FALSE).

• puoi usare le :: shorthand call nell'elemento ajax submit ( $element['#ajax']['callback'] = '::ajaxFormRebuild';e $element['#submit'] = [['::ajaxFormSubmitHandler'];).

• il callback ajax è puramente per restituire la forma ricostruita o i comandi ajax. Non restituire mai il modulo modificato (ovvero non modificare l'array di moduli in questo callback).

Per aggiungere a questo elenco di controllo, se si visualizza un modulo in una finestra modale esiste la possibilità che i messaggi di errore non vengano visualizzati. Come ha detto Ivan Jaros, devi assicurarti che il modulo abbia un wrapper:

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

Sarà inoltre necessario aggiungere quanto segue all'elemento che sta inviando il modulo. Nella maggior parte dei casi sarebbe il pulsante di invio:

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

Uso il modulo Contact Ajax . Alcuni ulteriori dettagli al riguardo (dalla sua pagina del progetto):

Contact Ajax implementa l'invio ajax per il modulo di contatto in Drupal 8.

Come funziona

Dopo aver abilitato il modulo, ogni modulo di contatto mostrerà una casella di controllo "Usa ajax". Quando questa casella di controllo è abilitata, il modulo di contatto ti mostrerà un'altra opzione "Tipo di conferma" con queste opzioni:

• Carica il modulo: invierà il modulo senza ricaricare la pagina.
• Carica da messaggio personalizzato: carica un testo personalizzato.
• Carica dal nodo: carica un nodo dopo l'invio del modulo.

Questo modulo potrebbe aiutarti se:

• devi personalizzare il messaggio di conferma
• devi inviare un modulo di contatto senza ricaricare la pagina.
• vuoi caricare un testo personalizzato o un altro nodo dopo l'invio del modulo.