tengo una semana rompiéndome la cabeza con esto. Nota: No se nada de JS, Ajax o algo parecido.
Aquí voy con lo que me pasa.
Tengo un formulario en un modal, el cual quiero llenarlo con datos de una tabla. Esos datos vienen de MySql. He leído de todo y no pego una (supongo que por el desconocimiento de JS o AJAX).
Mis códigos: index.php
<?php
require ("DBController.php");
$dbController = new DBController();
// Controlar las tildes y ñ en los resultados desde MySQL
$query = "SELECT * FROM empleados";
$result = $dbController->runQuery($query);
$host_db="localhost";
$user_db="root";
$pass_db="";
$db_name="mescyt_contratos";
$tabla = "login";
$con = new mysqli("$host_db","$user_db","$pass_db","$db_name");
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Ventana modal dinámica Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<style>
#conte-modal {
text-align: center;
padding: 10px;
}
#fondo {
background: url(imagenes/DB.png) no-repeat;
max-width: 650px;
text-align: center;
color: #FFF;
/* This works in IE 8 & 9 too */
filter: alpha(opacity=60);
-moz-opacity: 0.6;
/* Safari 1.x (pre WebKit!) */
-webkit-opacity: 0.6;
-o-opacity: 0.6;
opacity: 0.6;
background-size: 100% auto;
}
.mo-title {
font-size: 2em;
margin-bottom: 350px;
}
</style>
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<div class="container">
<h3 class="mt-5">Tabla</h3>
<hr>
<div class="row">
<div class="col-12 col-md-12">
<!-- Contenido -->
<table>
<thead>
<tr>
<th>ID </th>
<th>Nombres Completo</th>
<th>Boton</th>
</tr>
</thead>
<tbody>
<?Php
$result = mysqli_query($con, $query);
if (!$result) {
printf("Error: %s\n", mysqli_error($con));
exit();
}
while ($row = mysqli_fetch_array($result)) {
$id = $row['id'];
echo "
<tr>
<td>".$id." ok<td>
<td>".$row['Nombres']." ".$row['Apellidos']."</td>
<td><div onClick=\"loadDynamicContentModal('".$id."')\" class=\"btn btn-info\">Editar</div><td>
</tr>
";
}
?>
</tbody>
</table>
<div class="modal fade" id="bootstrap-modal" role="dialog">
<div class="modal-dialog" role="document">
<!-- Modal contenido-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Contenido modal dinámico Bootstrap</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<div id="conte-modal"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
<script>
function loadDynamicContentModal(modal){
var options = {
modal: true,
height:300,
width:600
};
$('#conte-modal').load('ObtenerDatos.php?my_modal='+modal, function() {
$('#bootstrap-modal').modal({show:true});
});
}
</script>
<!-- Fin Contenido -->
</div>
</div>
<!-- Fin container -->
<footer class="footer">
</footer>
<script src="assets/jquery-1.12.4-jquery.min.js"></script>
<script src="assets/jquery.validate.min.js"></script>
<script src="assets/ValidarRegistro.js"></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>
window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
Donde obtengo los datos para el modal: Obtenerdatos.php
<?php
require ("DBController.php");
$dbController = new DBController();
// Controlar las tildes y ñ en los resultados desde MySQL
$query = "SELECT * FROM empleados WHERE id = '" . $_GET["my_modal"] . "'";
$result = $dbController->runQuery($query);
if(!empty($result))
{
?>
<input type="text" value="<?php echo $result[0]["id"]?>"</input>
<div class='modal-text'><?php echo $result[0]["Nombres"]?></div>
<?php
}
?>
Y sucede que solo me carga en el modal el último registro en el botón todas las filas.
Muchas gracias de antemano.