1

Buenas no se mucho de jquery ni ajax pero me dijeron que con esos dos lo puedo hacer, yo use php pdo para conectarme y lo hace y mi tabla de la pagina me muestra mis registros correctamente y a cada registro le agregue dos botones editar y borrar (editar es el modal y al hacer clic me abre la ventana con los registro que se pueden modificar) pero no se como cargar cada registro en mi modal, al boton si se fijan en el codigo le agregue un name = el valor del id que es con el que buscare en mi base de datos pero de ahi no se que mas hacer , si logicamente pero no como hacerlo jeje

aqui tengo mi 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">&times;</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>

Aqui tengo donde contruyo mi 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>

No creo que sea necesario colocar mi archivo de conexion y consulta o si ? y bueno estaba haciendo un archivo llamado consulta-modal.js en el cual puse

function obtenerId() {

var id = document.getElementById("b_edit").getAttribute("name");

}

Para obtener el id de la celda donde este el boton pero no se jeje

6
  • Podrias cambiar la funcion obtenerID() por : var id = document.getElementById("b_edit").value; y asi sacas lo que contiene cada input que pongas ahi. Commented el 12 sept. 2017 a las 21:35
  • crea un form que contenga todos los input para hacer lograr una funcion que mande todos los datos por JS a la consulta que traiga datos y complete la tabla en el div modal Commented el 12 sept. 2017 a las 21:46
  • creo que no me hice entender bien jeje en una tabla vienen los registros y cada registro hay un boton lo que estaba haciendo o tratando es al hacer clic en el por ejemplo el boton de editar del registro 2, al pulsar ahi el obtener el id de ese registro y con ese id hacer la consulta en la tabla y luego traerme esa data pero ahora al modal para ser modificada
    – Naoto
    Commented el 13 sept. 2017 a las 13:01
  • entonces es mas facil de lo que pensaba, no debes tener la función obtener id, solo debes pasar la variable que contiene el id por la función de consulta de esta manera : consult_edit($ver[0]), de esa forma llegara a la función la variable que contiene el id, luego solo queda pasar la consulta por js y enviarla a la consulta. Commented el 13 sept. 2017 a las 13:18
  • si gracias hice eso :D onclick="consult_edit(<?php echo $ver[0];?>)" eso le puse al boton que hago por cada registro en la tabla y luego de ahi hice un archivo .js con esa funcion consul_edit y dentro de esa funcion le pase mi parametro id a un arreglo que le paso a ajax y de ahi si llamo mi consulta php y retorno una matriz ajax creo que se dice asi no se y por ultimo lleno mis input del modal jejejej ahora lo que estoy viendo es como luego de eso programar el boton de actualizar dentro del modal
    – Naoto
    Commented el 13 sept. 2017 a las 20:37

1 respuesta 1

0

Dejare la respuesta aquí abajo ya que no debe haberse visto muy clara en el comentario.

Solo debes asignar $ver[0] que es tu id dentro de la funcion consult_edit de esa manera llevaras el dato del id para pasarlo por JS y luego llegue a la consulta.

Boton[id:b_edit]

 <button class="btn btn-warning fa fa-pencil" id="b_edit"name="$ver[0]" data-toggle="modal" data-target="#modalEdicion" onclick="consult_edit(<?php echo $ver[0];?>)" ></button>

Para el botón modificar solo debes hacer una función la cual te envie a un modal como lo hiciste anteriormente pero en este caso que los value de cada input contengan los datos que pides desde la DB, de esa manera podrás ver los datos para ver cual modificaras.

Recuerda que la función para modificar también tendrás que enviar el ID como lo hiciste anteriormente.

Luego un boton submit que envié tus datos por JS a una consulta que haga el update correspondiente.

Espero puedas solucionar el problema, saludos!

1
  • Hola tengo el mismo problema por favor podrias pasarme el codigo de la funcion consul-edit();? gracias
    – Ylcaceres
    Commented el 14 may. 2018 a las 20:10

Tu Respuesta

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

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