Cómo refrescar el contenido de un modal de Bootstrap 3

15 marzo
por Pedro Morales

Sin duda, Bootstrap nos ha facilitado mucho la creación y personalización de contenido responsivo. Esta herramienta ayuda tanto a programadores como a maquetadores, por la cantidad y variedad de herramientas que su web documenta al detalle. Una de ellas es la posibilidad de abrir unas ventanas llamadas “Modals”.  Estos son el sustituto ideal para aquellos que acostumbran a crear pop-ups o ventanas emergentes. Estos modals permiten mantenerte en la misma página al hacer click en cualquier elemento html. Esto se lleva a cabo utilizando de forma transparente al usuario, código jquery con llamadas ajax o contenido estático.

Actualizar contenido de un modal de Bootstrap 3

Lo que vamos a explicar hoy, no es sólo la creación de uno de estos modals como podríais ver directamente en su web, sino también como refrescar su contenido ¿Es necesario refrescar su contenido? Depende. Si tu página utiliza un único modal en el que se quiere cargar contenido de distintos elementos clickables como botones o enlaces, necesitas vaciar el modal para cargar de nuevo aquello que deseas. De lo contrario, una vez se ha hecho click en un elemento que abra el modal, los siguientes elementos abrirán también el modal pero con el contenido siempre de ese primero.

Por ejemplo, si tenemos un modal con un formulario que contiene un campo dinámico como puede ser una referencia de un producto. Éste modal se abriría desde un botón de “añadir al carrito” presente en todos los productos de un listado. Entonces no sería recomendable tener dentro del bucle de productos la creación de un modal por cada uno de ellos. En su lugar crearíamos un único modal fuera del bucle que cambiaría según el producto que añadirías al carrito mediante una url con variable GET por ejemplo. Vamos a ello:

 

  1. Creación del enlace que lance el modal:

    En este caso el contenido a cargar será el resultado de una llamada ajax a la url que hay en href.

  2. Creación del modal:

     

  3. Respuesta del modal:

    Éste ejemplo mostraría una ventana al estilo Prestashop con una imagen a la izquierda y detalles del producto a la derecha, además de un botón que permite cerrar el modal y continuar navegando en la web. O por lo contrario ir al carrito y proceder a tramitar el pedido.
    Además puedes modificar fácilmente el tamaño del modal con las clases modal-lg y modal-sm dentro del div modal-dialog.

     

  4. Refrescar contenido del modal:

    Éste script de jQuery eliminará y limpiará el contenido que hay en el modal, por lo que al hacer de nuevo click en el enlace creado anteriormente, ejecutaría la llamada ajax que carga el contenido de nuevo. De lo contrario, en éste ejemplo que se utiliza la url de añadir producto, no insertaría nada al carrito de compra pues se limitaría a mostrar el modal con la información cargada la primera vez.

Y así es como podríamos tener nuestra propia ventana de información tras alguna acción con un sólo modal. Como resultado tendremos un código más limpio y fácil de mantener.

Categorías:Desarrollo Web
Contáctanos
966 27 81 05 info@avanzaeninternet.com
O si lo prefieres
Visítanos
C/ Gabriel Miró 45, 3º I 03420 Castalla (Alicante)
de lunes a jueves de 9:00 a 14:00 h. de 15:00 a 18:00 h.
viernes de 9:00 a 14:00 h.
Nuestras Redes Sociales

Nuestra web utiliza cookies propias y de terceros. Esto es necesario para que puedas disfrutar de la mejor experiencia. Más información.

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar