0

Buenas noches,

Tengo hecho un CRUD para un formulario de solicitud de información de una academia. La idea es usar AJAX para hacer el CRUD mucho más dinámico y efectivo, pero aún soy nuevo en AJAX y no tengo mucha idea para ser honesto.

Este es el CRUD:

CRUD

Para la tabla uso el plugin Datatables

Esta es mi estructura de archivos:

Para la Vista, esta en index/languageacademy/solicitud-informacion.php

El código de la tabla es el siguiente:

<table class="table table-striped table-bordered table-hover" id="solicitudinfo" data-order='[[ 0, "desc" ]]'>
<script>

    $(document).ready( function () {
        $('#solicitudinfo').DataTable( {} );
        $('[data-toggle="tooltip"]').tooltip(); 
    } );

</script>
    <thead>
        <tr>
            <th>ID</th>
            <th>Fecha</th>
            <th>Centro</th>
            <th>Nombre</th>
            <th>Curso</th>
            <th>Edad</th>
            <th>Contacto</th>
            <th>Etiquetas</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
    <?php
        $solicitud = new SolicitudInfo;
        $solicitudes = $solicitud->getSolicitudes();
        $totalsolicitudes = count($solicitudes);
        if ($totalsolicitudes > 0){
            foreach ($solicitudes as $solinfo){ 
    ?>
        <tr>
            <td><?php echo $solinfo['IDSolicitud']; ?></td>
            <td><?php echo $solinfo['DiaSolicitud']; ?><br><?php echo $solinfo['HoraSolicitud']; ?></td>
            <td><?php echo $solinfo['Centro']; ?></td>
            <td><?php echo $solinfo['Nombre']; ?>  <?php echo $solinfo['Apellidos']; ?></td>
            <td><?php echo $solinfo['CursoEscolar']; ?></td>
            <td><?php echo getAge($solinfo['FechaNacimiento']); ?> años</td>
            <td><i class="fa fa-phone-square" aria-hidden="true"></i> <?php echo $solinfo['MovilContacto']; ?><br><i class="fa fa-envelope" aria-hidden="true"></i> <?php echo $solinfo['EmailContacto']; ?></td>
            <td><span class="label label-default green" style="background-color:#32C5D2;border-radius: 5px !important;">Nueva Solicitud</span></td>
            <td>
                <a class="btneliminarsolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="remove" style="background-color:#FF0206;border: 0px !important;color:white;" data-toggle="confirmation" title="¿Eliminar Solicitud?" data-singleton="true"> <i class="fa fa-trash" aria-hidden="true"></i> </a>
                <button type="button" class="btn" style="background-color:#1b9e1d;border: 0px !important;color:white;" data-toggle="tooltip" title="Ver Solicitud"><i class="fa fa-eye" aria-hidden="true"></i></button>
                <button type="button" class="btn" style="background-color:#5172F3;border: 0px !important;color:white;" data-toggle="tooltip" title="Editar Solicitud"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
                <button type="button" class="btn" style="background-color:#EDC30F;border: 0px !important;color:white;" data-toggle="tooltip" title="Añadir Etiqueta"><i class="fa fa-tags" aria-hidden="true"></i></button>
                <div id="resultado-mi-formulario"></div>
            </td>
        </tr>
    <?php   
            }
        }
    ?>
    </tbody>
</table>

Después tengo el archivo ajax.js en index/assets/ajax.js donde quiero poner todo el código ajax para eliminar un item, editarlo, verlo en un modal, añadirlo desde un modal, etc.

este es el código ajax (Echo con la ayuda de @D.Bulton):

$(document).ready(function() {              
    $(document).on('submit', '#solicitudinfo', function() {   
        //Obtenemos datos.          
        var data = $(this).serialize();

        $.ajax({            
            type : 'POST',
            url  : '../assets/webla/solicitudinfo.php',
            data : data,
            success :  function(data) {                 
                $("#resultado-mi-formulario").html(data).fadeIn();
            },
            complete: function(){
               setTimeout(function() {
               }, 15000);    
            }
        });         
        return false;           
    });
     //Boton eliminar.
     $(".btneliminarsolinfo").click(function(e) {

         e.preventDefault();
         //Variable con el valor del boton.
         var id = $(this).attr('data-id');
         var action = $(this).attr('data-action');   

         //Ajax.
         $.post('../assets/webla/solicitudinfo.php', {
            Id:id,
            Action: action
         },function(supr) {
            if (supr=='0') {          
               location.href="solicitud-informacion.php";
            }
         }); 
    });
});

Y después esta el archivo solicitudinfo en index/assets/webla/solicitudinfo.php con el código:

 <?php 

    require_once("../classes/class.sistema.php");
    require_once("../classes/class.solicitudinfo.php");
    require_once("../functions.php");

    $solicitud = new SolicitudInfo;

    if ($_POST['action'] == "insert") {
        $centro = secure($_POST['centro']);
        $curso = secure($_POST['curso']);
        $nombre = ucwords(strtolower(secure($_POST['nombre'])));
        $apellido = ucwords(strtolower(secure($_POST['apellidos'])));
        $fechanacimiento = secure($_POST['fechanacimiento']);
        $poblacion = ucwords(strtolower(secure($_POST['pueblo'])));
        $codpostal = secure($_POST['codpostal']);
        $nombretutor = ucwords(strtolower(secure($_POST['nombretutor'])));
        $apellidostutor = ucwords(strtolower(secure($_POST['apellidostutor'])));
        $email = strtolower(secure($_POST['email']));
        $movil = secure($_POST['movil']);
        $conocen = "Not Answered";
        $atendido = secure($_POST['atendido']);
        $observaciones = ucfirst(strtolower(secure($_POST['observaciones'])));
        $dia = date("d") . "/" . date("m") . "/" . date("Y");
        $hora = date("G") . ":" . date("i") . ":" . date("s");

        $solicitud->addSolicitud($dia, $hora, $centro, $curso, $nombre, $apellido, $fechanacimiento, $poblacion, $codpostal, $nombretutor, $apellidostutor, $email, $movil, $conocen, $observaciones, $atendido);

        if ($solicitud == true) {
            echo "<script>swal('Confirmación', 'Se ha añadido la nueba solicitud.', 'success')</script>";
        } else {
            echo "<script>swal('Error', 'Ha ocurrido un problema al enviar la solicitud de información. Inténtelo de nuevo o llame al 902 024 890.', 'error')</script>";
        }
    };

    if ($_POST['Action'] == "remove") {
        $id = $_POST['Id'];

        $solicitud->deleteSolicitud($id);

        //Respuesta ajax, va redirigirnos al index o donde une quiera.
        echo "0";

    };

?>

Entonces estos son mis problemas:

  • EL formulario para insertar nuevas solicitudes funciona a través de ajax perfectamente, pero tengo dos problemas con él:

    • Una vez le das a enviar, se queda el modal de bootstrap abierto y tienes que cerrarlo manualmente para ver la notificación de confirmación. He probado a añadir al boton submit el data-miss"#modal" pero entonces no envia el formulario. ¿Cómo podría cerrar el modal una vez se envie el formulario?
  • No sé como hacer para actualizar la tabla una vez se haya insertado la nueva solicitud.

  • EL botón para eliminar la solicitud no funciona y no actualiza la tabla tampoco

  • ¿Cómo haría para mandar con ajax información a un modal?

  • Quiero usar el atributo data-action="remove/edit/insert" para así en el el archivo solicitudinfo.php poder usar if ($_POST['action'] == "".

Estas son mis dudas con el tema de ajax en un CRUD. SI me he olvidado de alguna información o se necesita más información, intentare añadirla lo antes posible.

1 respuesta 1

0

Ejecuta el siguiente línea de código en el método success del ajax, sustituye el selector jQuery por el id del modal que quieres cerrar:-

$('#idDelModalACerrar').modal('hide'); // cierra el modal.

Para actualizar la tabla:- Como lo tienes planteado la parte de imprimir información en la tabla, deberías recargar la página para actualizarla, ya que utilizas php para imprimirla. Sí utilizaras javascript para mostrar datos en la tabla, podrías hacer llamadas ajax para traer los datos del servidor y imprimirlos.

Parte html de eliminar:- Me da que el elemento no se define correctamente, se puede apreciar que tiene un color diferente. Compruébalo por sea caso, mira el código fuente de la página.

Para mostrar datos en un modal puedes hacer de la siguiente manera.

function ajaxCall() { 
  var modal = $("#myModal");
  var modalBody = $('.modal-body');

  $.get('http://www.json-generator.com/api/json/get/cfoiAssjPC?indent=3')
  .done(function(res) {
    modalBody.html(table(res[0]));
    modal.modal('show');
  })
  .fail(function(err) {
     modalBody.html("Error: "  + err);
  });
}

function table(obj) {
  var tabl = "<table class='table table-responsive'><th>Company</th><th>Phone</th><th>Address</th>";
  var tr = '<tbody><tr>';
  tr +="<td>"+obj['company']+"</td>";
  tr +="<td>"+obj['phone']+"</td>";
  tr +="<td>"+obj['address']+"</td>";
  tr += "</tr>";
  tabl += tr + "</tbody></table>";
  return tabl;
}
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
<button onclick="ajaxCall()">Mostrar Datos en modal</button>

3
  • ¿Cómo haría para cargar la tabla con ajax y como consecuencia recargarla una vez elimine,inserte o edite un item?
    – Charlie
    Commented el 25 sept. 2017 a las 11:02
  • Tendrás que crear un método que devuelva $solicitud->getSolicitudes() en php, entonces haces la llamada ajax para obtener datos. Por ejemplo parte php archivo se llama obtenersolicitudes.php <?php if($_GET['parametros']) { return lista;}?> Parte ajax $.get('obtenersolicitudes.php').done().fail();
    – Thakur
    Commented el 25 sept. 2017 a las 19:47
  • Para lo que me dijiste de cargar los datos con ajax, lo he probado y tengo problemas, he creado esta nueva pregunta para ese problema especifico: (es.stackoverflow.com/questions/107530/…)
    – Charlie
    Commented el 5 oct. 2017 a las 17:32

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.