Enlazar directamente a un punto concreto de la página web después de enviar formulario en Symfony2

Contexto:

Conocidos también como enlaces tipo “ancla” o “enlaces internos”, son links muy útiles para acceder a un elemento o sección concreta dentro de una página web específica. Su método de funcionamiento es simple, se sitúa un ancla (anchor)  en el punto exacto de la página que se quiere visualizar, para luego posteriormente acceder a él a través de un enlace HTML.

Para definir un ancla:

Para escribir un enlace en html que acceda a nuestro ancla, tenemos dos opciones:

OPCIÓN A: acceso a nuestro anchor desde un enlace situado en la misma página web en la que nos encontramos.

OPCIÓN B: por el contrario, acceso a través de un enlace procedente de otra página distinta. Sólo debemos escribir la dirección http en cuestión y añadirle “#” seguido del atributo “name” del ancla al que queremos llegar.

Problema:

Imaginamos que tenemos una página de contacto donde se visualiza una cabecera con un banner, un menú de navegación, un pequeño texto y posteriormente un formulario.  Es decir, que necesitamos hacer scroll para llegar a él. Si partimos de la idea de que esta página de ejemplo está hecha con Symfony 2 y además tiene configurada una validación, el proceso podría ser de la siguiente manera:

Paso 1

Visualizamos la página y hacemos scroll hacia abajo hasta llegar al formulario de contacto.

Paso 2

Lo Rellenamos con los datos en cuestión y pulsamos el botón de Enviar.

Paso 3

El Objeto Request llega al controlador donde se validan los datos introducidos, y en este punto podrán ocurrir dos cosas:

a) Que el formulario pase la validación

b) Que no la pase.

En ambos casos, querremos volver al lugar donde se encontraba el formulario, ya sea para mostrar un mensaje de alerta con el tipo de error de envío o ya sea para mostrar un mensaje de confirmación de envío exitoso.

La cuestión es, ¿Cómo consigo llegar al formulario tras la validación directamente, sin tener que volver a hacer scroll desde la parte superior de la página? Estoy seguro de que en este punto, tienes la respuesta. Estás en lo cierto, usando un enlace interno, o enlace tipo ancla.

Solución 1:

La solución más elegante y lógica: añadir el atributo action en el momento de construir el formulario en nuestro controlador. Asumiendo que estamos usando createFormBuilder , pero puedes hacer lo mismo si has creado una clase de formulario o directamente añadir el atributo al formulario en Twig.

De esta manera estarás apuntando directamente hacia la página de contacto, creando la url con el anchor incluido.

Para conocer más sobre cómo funcionan los formularios en Symfony 2, puedes consultar la documentación oficial en ingles, y si la versión en español de la mano de librosweb.es.

Solución 2:

Desde nuestra plantilla Twig podemos conocer el tipo de método del HTTP, de tal manera que tanto si el formulario ha sido enviado como si ha dado error obtendremos un método tipo POST cuando se vuelva a visualizar nuestra página de contacto. Al conocer el tipo de método que recibiríamos en esta situación, podemos crear un condicionante que añada una sentencia en javascript para crear un enlace automático que haga scroll directamente hasta la altura de nuestro formulario.

Para conocer más sobre cómo funcionan los métodos GET y POST, no dejes de pasarte por este magnífico artículo: Métodos GET vs POST del HTTP de Juan Ardissone.

Como todo en programación, siempre hay muchas maneras de solucionar el mismo problema. Si conoces alguna otra forma, no dudes en comentarlo, estaré más que feliz de seguir aprendiendo más y más y más. :)

Saludos y a seguir jugando con código.

Deja un comentario