0

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. 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&hellip;" 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">&#xE254;</i></a>
                          <a href="#" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</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 :&nbsp;</label>'.$row["nombre"].'</p>
   <p><label>Nro Int. :&nbsp;</label>'.$row["nro_internacion"].'</p>
   <p><label>Telcod :&nbsp;</label>'.$row["telcod"].'</p>
   <p><label>Nomgar :&nbsp;</label>'.$row["nomgar"].'</p>
   <p><label>Usuario :&nbsp;</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).

16
  • y como abres el modal?
    – user46896
    Commented el 9 ago. 2021 a las 23:30
  • y como consultas los datos que quieres traer en el modal ???
    – user46896
    Commented el 9 ago. 2021 a las 23:30
  • como escribes los datos en el modal???
    – user46896
    Commented el 9 ago. 2021 a las 23:30
  • la explicacion que agregas no explica lo que hace tu codigo....
    – user46896
    Commented el 9 ago. 2021 a las 23:31
  • Lo que hace el código es traer los datos en una tabla, de ahí automáticamente al darle clic al botón se guarda el NUMDOC para utilizarlo en otra consulta MySQL PDO y compara con otros datos de otra tabla. Es algo parecido a un CRUD, no se si me explico.
    – Francisco
    Commented el 10 ago. 2021 a las 11:13

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.