Estoy diseñando un dashboard y creé una tabla donde trae datos de diferentes personas. Estoy tratando de hacer que la tabla se lleve el "NUMDOC" de cada persona a través de un botón, para que con ese "NUMDOC" traiga datos de otra tabla. El problema, es que a la hora de hacer clic en el botón, únicamente me aparece el "backdrop" del modal de Bootstrap.
Imagen a modo de ilustración. El ojo representaría el botón que está puesto actualmente en el código. La idea es que se entienda un poco mejor cómo aparece en la tabla. Reflejará solo 5 resultados ya que tiene un LIMIT en la consulta $sql.
Primeramente, voy a compartir el código de mi tabla con su consulta php:
Consulta PHP
<?php
require_once 'controllers/connection.php';
error_reporting(E_ALL);
define("ROW_PER_PAGE",2);
$search_keyword = '';
if(!empty($_POST['search']['keyword'])) {
$search_keyword = $_POST['search']['keyword'];
}
$sql = 'SELECT * FROM padronint WHERE nombre LIKE :keyword OR numdoc LIKE :keyword OR domicilio LIKE :keyword OR telefono LIKE :keyword LIMIT 5;';
/* Pagination Code starts */
$per_page_html = '';
$page = 1;
$start=0;
if(!empty($_POST["page"])) {
$page = $_POST["page"];
$start=($page-1) * ROW_PER_PAGE;
}
$limit=" limit " . $start . "," . ROW_PER_PAGE;
$pagination_statement = $connect->prepare($sql);
$pagination_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pagination_statement->execute();
$row_count = $pagination_statement->rowCount();
if(!empty($row_count)){
$per_page_html .= "<div style='text-align:center;margin:20px 0px;'>";
$page_count=ceil($row_count/ROW_PER_PAGE);
if($page_count>1) {
for($i=1;$i<=$page_count;$i++){
if($i==$page){ //<li class="page-item active"><a href="#" class="page-link">1</a></li>
$per_page_html .= '<li class="page-item"><input type="submit" name="page" value="' . $i . '" class="page-link" /></li>';
} else {
$per_page_html .= '<li class="page-item"><input type="submit" name="page" value="' . $i . '" class="page-link" /></li>';
}
}
}
$per_page_html .= "</div>";
}
$query = $sql.$limit;
$pdo_statement = $connect->prepare($query);
$pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pdo_statement->execute();
$result = $pdo_statement->fetchAll(PDO::FETCH_ASSOC);
?>
Tabla HTML QUE MUESTRA LOS RESULTADOS DE DICHA CONSULTA
<form name="frmSearch" class="" action="" method="post">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8"><h2>Tabla <b>Internados</b></h2></div>
<div class="col-sm-4">
<div class="search-box">
<input type="text" name="search[keyword]" class="form-control" placeholder="Buscar…" value="<?php echo $search_keyword; ?>" id='keyword' maxlength='25'>
</div>
</div>
</div>
</div>
<!-- GUARDADO DE DATOS -->
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>DNI<i class="fa fa-sort"></i></th>
<th>Domicilio</th>
<th>Telefono</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php if (empty($result) === false): ?>
<?php foreach($result as $row): ?>
<tr>
<td><?= htmlspecialchars($row['nombre']) ?></td>
<td><?= htmlspecialchars($row['numdoc']) ?></td>
<td><?= htmlspecialchars($row['domicilio']) ?></td>
<td><?= htmlspecialchars($row['telefono']) ?></td>
<td><?= '<button data-bs-toggle="modal" data-bs-target="#getuser" data-id="<?php echo $row["numdoc"]?>" id="getUser" class="btn btn-sm btn-info">Ver</button>'; ?>
<i class="fa-solid fa-eye">
<!--<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a href="#" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>-->
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
<script>
$('#getuser').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
var modal = $(this);
var dataString = 'id=' + recipient;
$.ajax({
type: "GET",
url: "controllers/modalc.php",
data: dataString,
cache: false,
success: function (data) {
console.log(data);
modal.find('.dash').html(data);
},
error: function(err) {
console.log(err);
}
});
})
</script>
<div class="clearfix">
<!-- <div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div> -->
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link"><i class="fa-solid fa-left-from-line"></i></a></li>
<?php echo $per_page_html; ?>
<!--
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>-->
<li class="page-item"><a href="#" class="page-link"><i class="fa-solid fa-right-from-line"></i></a></li>
</ul>
</div>
</div>
</div>
</form>
SCRIPT QUE ALMACENA EL "NUMDOC" DE CADA PERSONA QUE APARECE EN LA TABLA
<script>
$('#getuser').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
var modal = $(this);
var dataString = 'id=' + recipient;
$.ajax({
type: "GET",
url: "controllers/modalc.php",
data: dataString,
cache: false,
success: function (data) {
console.log(data);
modal.find('.dash').html(data);
},
error: function(err) {
console.log(err);
}
});
})
</script>
Como se ve en el script, técnicamente solicita un archivo dentro de la carpeta "controllers", llamado "modalc.php". Este archivo es usar el ID que guarda el AJAX y simplemente hacer la consulta para que distribuya los datos en el modal, comparto el código a continuación:
CÓDIGO PHP DEL ARCHIVO MODALC.PHP
<?php
include('connection.php');
if(isset($_GET["numdoc"]))
{
$query = "SELECT * FROM internacion, padronint WHERE historia = '".$_GET["numdoc"]."'";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '<div class="row">';
foreach($result as $row)
{
$output .= '
<div class="col-md-9">
<br />
<p><label>Nombre : </label>'.$row["nombre"].'</p>
<p><label>Nro Int. : </label>'.$row["nro_internacion"].'</p>
<p><label>Telcod : </label>'.$row["telcod"].'</p>
<p><label>Nomgar : </label>'.$row["nomgar"].'</p>
<p><label>Usuario : </label>'.$row["usuario"].' years</p>
</div>
</div><br />
';
}
echo $output;
}
?>
CÓDIGO DEL MODAL UTILIZADO EN ESTE SISTEMA (BOOTSTRAP)
<!-- Modal -->
<div class="modal fade" id="getuser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
En este sistema estoy utilizando: Bootstrap, jQuery, Ajax, MySQL, PHP (PDO).