Buenas no se mucho de jquery ni ajax pero me dijeron que con esos dos lo puedo hacer, yo use php pdo para conectarme y lo hace y mi tabla de la pagina me muestra mis registros correctamente y a cada registro le agregue dos botones editar y borrar (editar es el modal y al hacer clic me abre la ventana con los registro que se pueden modificar) pero no se como cargar cada registro en mi modal, al boton si se fijan en el codigo le agregue un name = el valor del id que es con el que buscare en mi base de datos pero de ahi no se que mas hacer , si logicamente pero no como hacerlo jeje
aqui tengo mi index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="librerias/bootstrap/css/bootstrap.css">
<!-- Alertify -->
<link rel="stylesheet" type="text/css" href="librerias/alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="librerias/alertify/css/themes/default.css">
<!-- CSS propio -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- FontAwsome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- alertify, jquery, bootstrap JS, Popper -->
<script src="librerias/jquery/jquery-3.2.1.min.js"></script>
<script src="librerias/bootstrap/js/popper.min.js"></script>
<script src="librerias/bootstrap/js/bootstrap.js"></script>
<script src="librerias/alertify/alertify.js"></script>
<title>Visualización de la Base de Datos NAW</title>
</head>
<body>
<div class="container">
<div id="tabla"></div>
</div>
<div id="modalEdicion" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><span class="fa fa-refresh"></span> Actualizar datos</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nombre y Apellido</label>
<input type="text" name="" id="mod_nomb-a" class="form-control input-sm">
</div>
<div class="form-group">
<label>Teléfono</label>
<input type="text" name="" id="mod_email-a" class="form-control input-sm">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="" id="mod_tela-a" class="form-control input-sm">
</div>
<div class="form-group">
<label>Comuna</label>
<input type="text" name="" id="mod_comuna-a" class="form-control input-sm">
</div>
<div class="form-group">
<label>Estado</label><br>
<input type="checkbox" id="mod_status-a" class="input-sm" value=""> <span>Activo</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" id="actualizadatos" data-dismiss="modal">Actualizar</button>
</div>
</div>
</div>
</div>
</body>
</html>
}
<!-- Jquery en el cual llamamos a la tabla -->
<script type="text/javascript">
$(document).ready(function(){
$('#tabla').load('components/tabla.php');
});
</script>
Aqui tengo donde contruyo mi tabla.php
<?php
require "../php/conector.php";
?>
<!-- Titulo con clase de bootstrap -->
<h1 class="display-4" id="titulo"> Visualización de Datos</h1>
<div class="row table-responsive">
<div class="col-sm-12">
<!-- <caption>
<button class="btn btn-primary" data-toggle="modal" data-target="#form_new" id="margen_inf"> Agregar Nuevo
<span class="fa fa-plus-circle"></span>
</button>
</caption> -->
<!-- Table-hover sombrea celdas -->
<!-- table-condensed para que se vea mas comprimido -->
<!-- Parezca una celda la tabla -->
<table class="table table-hover table-condensed table-bordered">
<tr>
<td>ID</td>
<td>Nombre y Apellido</td>
<td>Teléfono</td>
<td>Correo</td>
<td>Comuna</td>
<td>Creado</td>
<td>Actualizado</td>
<td>Estado</td>
<!-- Columnas extra para edición y eliminación -->
<td>Editar</td>
<td>Eliminar</td>
</tr>
<?php
$object_result = new Database();
$object_result->connect();
$query = "SELECT * FROM `membresia`";
$data = $object_result->query($query);
foreach ($data as $ver ) {
?>
<!-- Para ser llenado por PHP -->
<tr>
<td><?php echo $ver[0] ?></td> <!-- Columna 1 es la 0 -->
<td><?php echo $ver[1] ?></td>
<td><?php echo $ver[2] ?></td>
<td><?php echo $ver[3] ?></td>
<td><?php echo $ver[4] ?></td>
<td><?php echo $ver[5] ?></td>
<td><?php echo $ver[6] ?></td>
<td><?php
if ($ver[7] == 1) { ?>
<i class="fa fa-toggle-on" aria-hidden="true"></i></td>
<?php } else { ?>
<i class="fa fa-toggle-off" aria-hidden="true"></i></td>
<?php } ?>
<!-- Editar y Eliminar -->
<td>
<button class="btn btn-warning fa fa-pencil" id="b_edit"name="$ver[0]" data-toggle="modal" data-target="#modalEdicion" onclick="consult_edit(this)" ></button>
</td>
<td>
<button class="btn btn-danger fa fa-trash" ></button>
</td>
</tr>
<?php
} // While
?>
</table>
</div>
</div>
No creo que sea necesario colocar mi archivo de conexion y consulta o si ? y bueno estaba haciendo un archivo llamado consulta-modal.js en el cual puse
function obtenerId() {
var id = document.getElementById("b_edit").getAttribute("name");
}
Para obtener el id de la celda donde este el boton pero no se jeje