Nueva pregunta

Pregunta:

 
  3  
 
 
Walter Sánchez Karma: 6600 Argentina
 
 Fecha: 08-07-2017 18:37:32 (En Español)

Bootstrap 3 Ventana modal se dispara tras un evento sobre un boton - Código más limpio con [data-] que inyectar un funcion JS[Resuelta]

Hola a todos

En esta oportunidad les comparto una experiencia sobre un ejercicio y aprendizaje.
Lo que expondré seguramente para los professional developer les resulte una tontería, espero quesea útil para quienes no son avezados en el desarrollo web y están entrando en este mundo. A los primeros les pido disculpas si cometo errores y los invito a aportar valor con sus opiniones, a los segundos les digo que solo es una apreciación mía, que no sea tomado al pie de la letra, solamente doy mi humilde punto de vista y pie para investigar sobre el tema.
Terminado el prólogo, vamos al tema.

Me di la tarea de desarrollar un ejercicio para aprender como utilizar las ventana modal de bootstrap 3 en su uso más básico con jQuery.

Se trata de mostrar datos en una tabla, cada fila contiene nombres y apellidos. Un ID que no es visible, servirá más tarde para obtener datos.
Además 2 botones [Ver] [Editar] que al hacer click en cualquiera de ellos dispare el evento de mostrar la ventana modal en ella mostrará el ID del registro y la acción (boton) que la disparó.


Al hacer clic sobre alguno de los botones, emerge la ventana modal como se ilustra

El codigo:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap 3.3.7 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Jquery 3.2.1  -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- Bootstrap 3.3.7 JS  -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        function accion(accion,id){
            $(document).ready(function () {
                $('#accion-modal').html(accion);
                $('#id-modal').html(id);
                $('#botonUltimaAccion').removeClass('hidden');
            })
        }

    </script>
</head>
<body>
<body>
<div class="container">
    <h3>Tabla de datos</h3>
    <table class="table table-bordered table-condensed table-hover">
        <thead >
        <tr>
            <th class="active">Nombre</th>
            <th class="active">Apellido</th>
            <th class="active">Accion</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td><a onclick="accion('ver',1);" href="#" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModalmostrar" role="button">Ver</a> <a href="#" onclick="accion('editar',1)" class="btn btn-xs btn-danger " data-toggle="modal" data-target="#myModalmostrar" role="button">Editar</a></td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td><a onclick="accion('ver',2);" href="#" class="btn btn-xs btn-primary"  data-toggle="modal"  data-target="#myModalmostrar" role="button">Ver</a> <a href="#" onclick="accion('editar',2)" class="btn btn-xs btn-danger " data-toggle="modal" data-target="#myModalmostrar" role="button">Editar</a></td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td><a onclick="accion('ver',3);" href="#" class="btn btn-xs btn-primary" data-toggle="modal"  data-target="#myModalmostrar" role="button" >Ver</a> <a href="#" onclick="accion('editar',3)" class="btn btn-xs btn-danger " data-toggle="modal" data-target="#myModalmostrar" role="button" >Editar</a></td>
        </tr>
        </tbody>
    </table>
    <button type="button" id="botonUltimaAccion" class="btn btn-primary hidden" data-toggle="modal" data-target="#myModalmostrar">Ultima accion</button>
</div>
<!-- modal -->

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModalmostrar" >
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="gridSystemModalLabel">Info</h4>
			</div>
			<div class="modal-body">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-6">Acción:</div>
						<div class="col-md-6">ID</div>
					</div>
					<div class="row">
						<div class="col-md-6" id="accion-modal"></div>
						<div class="col-md-6" id="id-modal"></div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
			</div>
		</div>
	</div>
</div>

</body>
    
</html>

Codigo Online ejecutable
Si bien el codigo es funcional y cumple con su propósito, me desagradaba que en el HTML este sucio con codigo de javascript como en las líneas que contienen por ej. onclick="accion('ver',1), etc.

He visto esta práctica de incluir llamadas a funciones de javascript en innumerables códigos, app y en la mayoría en tutoriales.

Entonces me he puesto a investigar un poco en la red sobre otros temas y de casualidad caí en una web que me brindo la solucion a tener un codigo más limpio.
Se trata de HTML data-* Attributes
Si bien lo he visto en algunos códigos nunca me he puesto a averiguar de qué se trataba.


Breve introducción.

Los atributos data- son creados en la especificación de HTML5 con la intención de que los desarrolladores los usemos para alojar datos (“data”) que son privados a la aplicación o al sitio web, para los cuales no existe ningún otro atributo apropiado.
Un atributo data consta de un prefijo “data-” seguido del nombre que consideremos más apropiado para el valor que va a guardar, por ejemplo:

<img id="imagen" src="fotoPaisaje.jpg" alt="Fotografía"
     data-camara="NIKON D3300"
     data-efecto="Simple"
     data-geo="-34.604830914 -58.368831858"
     data-fecha="08/07/2017" />


Accediendo con Javascript
var imagen = document.getElementById('imagen');
alert(imagen.dataset.fecha); // devuelve el valor de data-fecha Resultado: 08/07/2017

Utilizando el framework jQuery:
fechaImagen= $('#imagen').data('fecha');
alert(fechaImagen)// devuelve el valor de data-fecha Resultado: 08/07/2017

Sale un Alert con la fecha de la imagen obtenido de data-fecha

Se puede aplicar CSS para un elemento con “data-*”
        img[data-efecto="3D"] {
            border: 5px solid peru;
        }

Se aplica el CSS solamente aquellos que sean data-efecto="3D" se le aplica un borde con el color Peru
Código de ejemplo usando Javascript:
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Data</title>
    <style>
        img{
            width: 25%;
            height: 25%;
        }
        img[data-efecto="3D"] {
            border: 5px solid peru;
        }
    </style>

</head>
<body>
<img id="imagen1" src="https://cdn.pixabay.com/photo/2015/12/12/17/52/building-1089861_960_720.jpg" alt="Fotografia 1"
     data-camara="NIKON D3300"
     data-efecto="Simple"
     data-geo="-34.604830914 -58.368831858"
     data-fecha="08/07/2017" />

<img id="imagen2" src="https://cdn.pixabay.com/photo/2016/02/19/17/43/computer-1210791_960_720.jpg" alt="Fotografia 2"
     data-camara="NIKON B500"
     data-efecto="3D"
     data-geo="-34.604830914 -58.368831858"
     data-fecha="11/01/2016" />
<script type="text/javascript">
    var imagen = document.getElementById('imagen1');
    alert(imagen.dataset.fecha);
</script>
</body>
</html>

Codigo Online ejecutable - javascript
Codigo Online ejecutable - jQuery

Se aplica el CSS solamente aquellos que sean data-efecto="3D" se le aplica un borde con el color Peru. Sale un Alert con la Fecha de la imagen.



Ya entendido los atributos data-
Modifique el codigo anterior. Cada botón tiene data-id que estaría asociado a la fila o registro, data-accion está asociada a la acción del botón que pueden ser ver o editar
Al hacer clic en algun boton se dispara el evento click que tiene la clase BTN_Accion, se muestra la ventana modal y en ella se imprimen los datos obtenidos de data-id y data-accion por medio de:
data_id =  $(this).data('id'); // getter
data_accion = $(this).data('accion'); // getter

Por cuestiones meramente práctica el nombre y apellido se obtiene de la misma tabla con
nombre=$(this).parents("tr").find("td").eq(0).html();
$('#nombre-modal').html(nombre);
apellido=$(this).parents("tr").find("td").eq(1).html();

Naturalmente que estos datos y otros se podrían obtener mediante AJAX de una fuente de datos como una base de datos.

Quedando el codigo de la siguiente forma:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Tabla con click</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap 3.3.7 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Jquery 3.2.1  -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- Bootstrap 3.3.7 JS  -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">

		$(document).ready(function () {

			$('.BTN_Accion').click(function(){
				data_id =  $(this).data('id'); // getter
				data_accion = $(this).data('accion'); // getter
				$('#id-modal').html( data_id);
				$('#accion-modal').html(data_accion);
				nombre=$(this).parents("tr").find("td").eq(0).html();
				$('#nombre-modal').html(nombre);
				apellido=$(this).parents("tr").find("td").eq(1).html();
				$('#apellido-modal').html(apellido);
				$('#botonUltimaAccion').removeClass('hidden');
			})

		})
	</script>
</head>
<body>
<div class="container">
	<h3>Tabla de datos</h3>
	<table class="table table-bordered table-condensed table-hover">
		<thead >
		<tr>
			<th class="active">Nombre</th>
			<th class="active">Apellido</th>
			<th class="active">Accion</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>John</td>
			<td>Doe</td>
			<td><button type="button" class="btn btn-xs btn-primary BTN_Accion" role="button" data-toggle="modal" data-target="#myModalmostrar" data-id="1" data-accion="ver">Ver</button> <button type="button" class="btn btn-xs btn-success BTN_Accion" role="button" data-toggle="modal" data-target="#myModalmostrar" data-id="1" data-accion="editar">Editar</button></td>
		</tr>
		<tr>
			<td>Mary</td>
			<td>Moe</td>
			<td><button type="button" class="btn btn-xs btn-primary BTN_Accion" role="button" data-toggle="modal" data-target="#myModalmostrar" data-id="2" data-accion="ver">Ver</button> <button type="button" class="btn btn-xs btn-success BTN_Accion" role="button" data-toggle="modal" data-target="#myModalmostrar" data-id="2" data-accion="editar">Editar</button></td>
		</tr>
		<tr>
			<td>July</td>
			<td>Dooley</td>
			<td><button type="button" class="btn btn-xs btn-primary BTN_Accion" role="button" data-toggle="modal" data-target="#myModalmostrar" data-id="3" data-accion="ver">Ver</button> <button type="button" class="btn btn-xs btn-success BTN_Accion" role="button" data-toggle="modal" data-target="#myModalmostrar" data-id="3" data-accion="editar">Editar</button></td>
		</tr>
		</tbody>
	</table>

	<button type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#myModalmostrar" id="botonUltimaAccion">Ultima accion</button>
</div>

<!-- modal -->


<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModalmostrar" >
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="gridSystemModalLabel">Info</h4>
			</div>
			<div class="modal-body">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-6">Acción:</div>
						<div class="col-md-6" id="accion-modal"></div>
					</div>
					<div class="row"> <div class="col-md-12"><h4>Datos:</h4></div></div>
					<div class="row">
						<div class="col-md-6">ID</div>
						<div class="col-md-6" id="id-modal"></div>
						<div class="col-md-6">Nombre</div>
						<div class="col-md-6" id="nombre-modal"></div>
					</div>
					<div class="row">
						<div class="col-md-6">Apellido</div>
						<div class="col-md-6"  id="apellido-modal"></div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
			</div>
		</div>
	</div>
</div>

</body>
</html>

Codigo Online ejecutable

Se puede realizar un setter en un atributo data-* es decir asignarle un valor.
por ejemplo:

$(this).data('id',404); // setter - el id tendra el valor 404


El resultado final es el mismo pero usando data-* el codigo HTML queda más limpio

Espero que este post aporte valor al conocimiento de la comunidad.

Será muy bienvenida las sugerencias de uds para mejorar el codigo. Muy útil para que todos nos nutramos de buenos conocimientos y buenas prácticas.

Disculpen por el título del post, no es muy descriptivo al tema, se me ha agotado la creatividad por hoy. Sugieren alguno y lo cambio

Que tengan un buen dia

Saludos.
 Etiquetas: Aporte - Bootstrap - JQuery Votos: 3 - Respuestas: 2 - Vistas: 20 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com