Good I do not know much about jquery or ajax but they said that with those two I can do it, I use php pdo to connect and it does it and my table of the page shows me my registers correctly and to each record I add two buttons edit and delete (edit is the modal and clicking opens the window with the records that can be modified) but I do not know how to load each record in my modal, to the button if they are fixed in the code I add a name = the value of the id that is with which I will look in my database but from there I do not know what else to do, if logically but not how to do it hehe
here I have my 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>
Here I have where I build my 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>
I do not think it is necessary to place my connection file and consult or if? and well I was doing a file called query-modal.js in which I put
function obtenerId() {
var id = document.getElementById("b_edit").getAttribute("name");
}
To get the id of the cell where the button is but do not be hehe