0

Tengo una duda es que quiero implementar ajax a mi codigo es un CRUD en PHP y MySQL(PDO), lo que ocurre es que de la manera que lo hice no se si lo pueda implementar. Aqui va mi arquitectura primera (orden de carpetas) introducir la descripción de la imagen aquí

Luego de eso queria implementar el ajax pero no me funciona y realmente no se muy bien como aplicarlo a mi proyecto, e visto varios videos pero estos tienen una arquitectura bastante diferente a la mia. Aquí va el codigo.

<?php
include 'model/conexion.php';
$sentencia = $bd->query("SELECT * FROM productos;");
$producto = $sentencia->fetchAll(PDO::FETCH_OBJ);
?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

</head>

<body>
  <div class="container">
    <div class="row">
      <form action="controllers/insertar.php" method="post" onsubmit="return validar();">
        <div class="form-row">
          <div class="form-group col-md-12">
            <label for="inputPassword4">Producto</label>
            <input class="form-control" type="text" name="producto" id="producto">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputAddress2">Codigo</label>
            <input class="form-control" type="text" name="codigo" id="codigo">
          </div>
          <div class="form-group col-md-4">
            <label for="inputAddress2">Valor unidad</label>
            <input class="form-control" type="text" name="valor_unidad" id="valor_unidad">
            </select>
          </div>
          <div class="form-group col-md-2">
            <label for="inputAddress2">Stock</label>
            <input class="form-control" type="text" name="stock" id="stock">
          </div>
        </div>
        <input type="hidden" name="oculto" value="1">
        <button type="submit" class="btn btn-primary">Registrar</button>
      </form>
    </div>
  </div>
  <hr>

  <table id="table" class="display" style="width:100%">
    <thead>
      <tr>
        <th>#</th>
        <th>Codigo</th>
        <th>Producto</th>
        <th>Stock</th>
        <th>Valor Unidad</th>
        <th>Valor total</th>
        <th>Opciones</th>
      </tr>
    </thead>
    <tbody>
      <?php
      $i = 1;
      foreach ($producto as $dato) {
      ?>
        <tr>
          <td><?php echo $i++; ?></td>
          <td><?php echo $dato->codigo; ?></td>
          <td><?php echo $dato->producto; ?></td>
          <td><?php echo $dato->stock; ?></td>
          <td><?php echo $dato->valor_unidad; ?></td>
          <td><?php echo $dato->stock * $dato->valor_unidad . '$'; ?></td>
          <td> <a class="btn btn-success" id="edit" href="editar.php?id=<?php echo $dato->id; ?>">Editar</a>
            <a class="btn btn-danger" id="del" href="controllers/eliminar.php?id=<?php echo $dato->id; ?>">Eliminar</a>
          </td>

        </tr>
      <?php
      }
      ?>
    </tbody>
  </table>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" id="edit" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</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="ventana"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <input class="btn btn-primary" type="submit" value="Editar">
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
  <script src="assets/js/validaciones.js"></script>
  <script>
    $(document).ready(function() {
      var table = $('#table').DataTable({
        orderCellsTop: true,
        fixedHeader: true
      });

    });

    $(document).on("click", "#del", function(e) {
      e.preventDefault();

      if (window.confirm("¿Esta seguro de borrarlo?")) {
        var del_id = $(this).attr("value");

        $.ajax({
          url: "controllers/eliminar.php",
          type: "get",
          data: {
            del_id: del_id
          },
          success: function(data) {
            $("#table").html(data);
          }
        });
      } else {
        return false;
      }

    });
  </script>


</body>

</html>

Como ven en la parte del script queria implementar ajax y que se me cargue la pagina sin necesidad de reinciarla, lo mismo quiero hacer para el editar y ponerlo en un modal pero primero quiero ver puedo hacerlo funcionar en el eliminar.

2
  • Saludos. Verifica; al parecer (en tu caso) el jquery-3.5.1.slim.min.js no incluye ajax. el 28 nov. 2020 a las 7:11
  • Gracias ese era el error, me di cuenta despues de que publico jejeej gracias el 28 nov. 2020 a las 18:44

1 respuesta 1

0

Se soluciono este error llamando bien el jquery ya que me lanzaba un error en el javascript.

1
  • El error era que estaba poniendo jquery.slim y debia poner jquery.min el 1 dic. 2020 a las 3:49

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.