¿Cómo puedo implementar el envío de formularios AJAX?

Pregunta:

Mi tarea es enviar un formulario de contacto a través de AJAX y luego mostrar un "¡Gracias por el envío!" mensaje, cargado en el lugar donde estaba el formulario. Entonces necesito ajaxificar el formulario de contacto existente.

Encontré algunos ejemplos de cómo validar campos de formulario usando AJAX en D8, pero no puedo encontrar ningún ejemplo de cómo implementar un envío de formulario ajax y cargar algo de contenido a través de AJAX luego.

¿Cómo puedo implementar mi tarea? ¿Cómo debo modificar el formulario de contacto para agregar la funcionalidad requerida?

Respuesta:

Al trabajar con ajax en formularios, debe tener en cuenta lo siguiente:

  • sepa si está reconstruyendo el formulario completo o solo una parte y envuelva el formulario en consecuencia con el elemento div que tiene el atributo ID que usará en la definición #ajax en el elemento desencadenante como 'envoltorio'. Utilice los atributos #prefix y #suffix para esto ( $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>'; ). También tenga en cuenta que si tiene una plantilla personalizada para que su formulario NO represente el prefijo y el sufijo en este caso ( {{ form|without('#prefix', '#suffix') }} ) de lo contrario, se procesarán dos veces – por su plantilla y también por el envoltorio del tema del formulario. No puede evitar esto configurando #theme_wrappers en una matriz vacía, ya que la plantilla de formulario contiene el elemento html de formulario real.

  • en su controlador de envío ajax, devuelva el formulario completo o parte del mismo que ha envuelto y desea reconstruir ( return $form o return $form['myelement'] ). Además, puede usar comandos ajax en lugar de simplemente devolver la estructura del formulario, pero eso es algo más avanzado.

  • almacene cada valor en el almacenamiento del estado del formulario hasta que envíe el formulario. Haga esto en el controlador de envío ( $form_state->set('somevalue', $form_state->getValue('somevalue')) ) y siempre llame a $form_state->setRebuild() si no está realizando el envío final del formulario. Prefiero tener controladores de envío personalizados, pero tener más lógica en el controlador de envío principal también está bien.

  • use siempre el atributo #name en el botón que está realizando el envío y si solo tiene un controlador de envío de formulario único, use $for_state->getTriggeringElement()['#name'] para detectar qué elemento ha enviado el formulario.

  • Si está utilizando 'trigger_as' en la definición de #ajax, en caso de que desee enviar el formulario con el elemento de selección, por ejemplo, utilice siempre la misma definición de #ajax que utiliza en el botón. En mi experiencia, es obligatorio, aunque no se indica en la documentación.

  • usar #limit_validation_errors puede #limit_validation_errors muy complicado a veces y descubrir por qué el formulario no funciona puede llevar bastante tiempo, así que úselo con cuidado (esto es bueno para aislar errores de formulario solo en los elementos que está reconstruyendo realmente para que su código no influye en otras partes del formulario).

  • siempre use botones para enviar el formulario y si desea tener algo elegante, como seleccionar el elemento desencadenante, use la opción 'trigger_as' de la configuración #ajax y oculte el botón real con la clase 'js-hide' para una buena interfaz de usuario.

  • en la definición del formulario, obtenga los valores predeterminados del almacenamiento del estado del formulario si existen o asígnelos al almacenamiento si no es así. De lo contrario, el formulario no funcionará correctamente.

  • no use $ this o cualquier otra cosa a la que no tenga acceso externamente, de lo contrario romperá el ajax. siempre use controladores estáticos ajax.

  • cuando finalmente envíe el formulario, dependiendo del hecho de que (no) tenga un controlador de envío de formularios personalizado para el ajax, desactive la reconstrucción del formulario llamando a $form_state->setRebuild(FALSE) .

  • puede usar las :: llamadas abreviadas en el elemento de envío ajax ( $element['#ajax']['callback'] = '::ajaxFormRebuild'; y $element['#submit'] = [['::ajaxFormSubmitHandler']; ).

  • la devolución de llamada ajax es puramente para devolver el formulario reconstruido o los comandos ajax. Nunca devuelva una forma alterada (es decir, no modifique la matriz de formularios en esta devolución de llamada).

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım