1

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">&times;</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.

1 respuesta 1

5

saca la function loadDynamicContentModal del bucle, se está repitiendo en cada vuelta y solo tendría que estar una vez.

Además, no estás pasandole el valor $row['id'] a la función en cada row.

<td><div onClick=\"loadDynamicContentModal('".$row['id']."')\" class=\"btn btn-info\">Editar</div><td>
4
  • Muchas gracias por tu respuesta. Listo, saqué la función del bucle, sin embargo, el modal me carga en blanco, añadiéndole '".$row['id']."' el ni los campos muestra... :( el 3 dic. 2019 a las 7:02
  • Voy a necesitar mas información para poder ayudarte. como el html completo, si puedes actualizarlo en tu pregunta podre ayudarte
    – Roy Bogado
    el 3 dic. 2019 a las 7:09
  • Corrijo: No eliminé la función, solo la copié y eso provocaba el error. Funcionó tu respuesta. Muchas gracias! el 3 dic. 2019 a las 7:36
  • @AmilcarAngeles Genial, buena suerte!
    – Roy Bogado
    el 3 dic. 2019 a las 7:57

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.