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

15 marzo

por Avanza en internet

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:

Creación del enlace que lance el modal:

<a data-toggle="modal" data-target="#AvanzaModal" href="http://www.avanzaeninternet.com/producto-de-ejemplo/?add-to-cart=463" alt="Comprar producto" class="miclase" data-product_id="463" data-product_sku="45678652" data-product-quantity="1">AÑADIR A CARRITO</a>

1	<a data-toggle="modal" data-target="#AvanzaModal" href="http://www.avanzaeninternet.com/producto-de-ejemplo/?add-to-cart=463" alt="Comprar producto" class="miclase" data-product_id="463" data-product_sku="45678652" data-product-quantity="1">AÑADIR A CARRITO</a>

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

Creación del modal:

<div class="modal fade" id="AvanzaModal" tabindex="-1" role="dialog" aria-labelledby="AvanzaModalLabel">
    <div class="modal-dialog modal-lg" role="document">
	<div class="modal-content">
	</div>
    </div>
</div>

</div>

Respuesta del modal:

<!DOCTYPE html>
    <html>
	<head>
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	    <title>TITULO</title>
	</head>
    <body>
        <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	    <span class="titulo" id="AvanzaModalLabel">Producto de ejemplo añadido a tu carrito</span>
	</div>
	<div class="modal-body">
	    <div class="row">
		<div class="col-xs-12 col-sm-6">
		    <div class="thumbnail">
			<img src="https://avanzaeninternet.com/producto-253.png" title="Nombre del producto" alt="Texto alternativo">
			</div>
		    </div>
		<div class="col-xs-12 col-sm-6">
		    <div class="talla">XL</div>
		    <div class="descripcion">Esto es un producto de prueba</div>
		    <div class="precio">100,00€</div>
		</div>
	    </div>
	</div>
	<div class="modal-footer clearfix">
	    <button type="button" class="pull-left btn btn-default" data-dismiss="modal">Continuar comprando</button>
	    <a href="https://avanzaeninternet.com/cart/" class="button">Finalizar compra</a>
	</div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>TITULO</title>

</head>

<body>

<span class="titulo" id="AvanzaModalLabel">Producto de ejemplo añadido a tu carrito</span>

</div>

</div>

<div class="descripcion">Esto es un producto de prueba</div>

</div>

<button type="button" class="pull-left btn btn-default" data-dismiss="modal">Continuar comprando</button>

<a href="https://avanzaeninternet.com/cart/" class="button">Finalizar compra</a>

</div>

</body>

</html>

É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.

Refrescar contenido del modal:

<script>
    jQuery(document).ready(function(){

	jQuery('#AvanzaModal').on('hidden.bs.modal', function (e) {
	    jQuery(this).removeData('bs.modal');
	    jQuery(this).find('.modal-content').empty();
	})

    })
</script>

jQuery(document).ready(function(){

jQuery('#AvanzaModal').on('hidden.bs.modal', function (e) {

jQuery(this).removeData('bs.modal');

jQuery(this).find('.modal-content').empty();

})

</script>

É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