5

quisiera saber si alguien me puede orientar en lo siguiente: se trata de un formulario para solicitudes de etiquetas, bueno la idea es que conforme el usuario va solicitando, se va llenando una tabla con javaScript, al tiempo, se alimenta la tabla de la base de datos a travez de ajax, (con ayuda de ésta comunidad llegué hasta ahí); ahora no logro hacer que se borre una fila en caso de que el usuario quiera cancelar alguna de las solicitudes; a continuación muestro el codigo q tengo:

<!DOCTYPE html>
<html>
<head>
    <title>Solicitudes</title>
    <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">

     $(document).ready(function(){

        function guardar() {

        var _planta = document.getElementById("pl_1").value;
        var _solicitante = document.getElementById("solicitante_1").value;
        var _codPT = document.getElementById("codigoP_1").value;
        var _descPT = document.getElementById("descripcion_1").value;
        var _lote = document.getElementById("lote_1").value;

        var _ff = document.getElementById("ffab_1").value;
        var _fv = document.getElementById("fv_1").value;
        var _vida = document.getElementById("vidaUtil_1").value;

        var _codE = document.getElementById("codigoE_1").value;
        var _descE = document.getElementById("descripcionE_1").value;
        var _cant = document.getElementById("cant_1").value;

        var datos = {
          "planta" : _planta,
          "codigoUsu" : _solicitante,
          "cod_PT" : _codPT,
          'desc_PT' : _descPT,
          'lote' : _lote,

          'ffab' : _ff,
          'fven' : _fv,
          'vida_util' : _vida,

          'cod_etq' : _codE,
          'desc_etq' : _descE,
          'cantidad' : _cant

        };

        $.ajax({
          data:  datos,
          url:   'guardarSolicitud.php',
          type:  'post',
          success:  function (response) {
               if(response==1)
              alert('Solicitud exitosa.')
            else
              alert('Por favor intente de nuevo.')
          }
        });

        var i = 1;

          //--------------------------------------------FILAS-----------------------------------------------------------------

        //contador para asignar id al boton que borrara la fila

        var fila = '<tr class="solid" id="row' + i + '"><td>' + _planta + '</td><td>' + _solicitante + '</td><td>' + _codPT + '</td><td>' + _descPT + '</td><td>' + _lote + '</td><td>' + _ff + '</td><td>' + _fv + '</td><td>' + _vida + '</td><td>' + _codE + '</td><td>' + _descE + '</td><td>' + _cant + '</td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Borrar</button></td></tr>'; 

        i++;
                var btn = document.createElement("TR");
                btn.innerHTML=fila;
                document.getElementById("mytable").appendChild(btn);

                document.getElementById("pl_1").value ="";
                document.getElementById("solicitante_1").value = "";

                document.getElementById("codigoP_1").value ="";
                document.getElementById("descripcion_1").value = "";
                document.getElementById("lote_1").value = "";

                document.getElementById("ffab_1").value ="";
                document.getElementById("fv_1").value = "";
                document.getElementById("vidaUtil_1").value = "";

                document.getElementById("codigoE_1").value = "";
                document.getElementById("descripcionE_1").value ="";
                document.getElementById("cant_1").value = "";

                document.getElementById("codigoP_1").focus();
            };            

            $(document).on('click', '.btn_remove', function borrar(e) { 
                e.preventDefault();
                id = jQuery(this).parent().attr("row");

                $.ajax({
                data:  id,
                url:   'borrarSol.php',
                type:  'post',
                success:  function (response) {
                    jQuery(this).parent().remove();
                    if(response==1)
                    alert('registro borrado.')
                    else
                    alert('no borra.')
                }

            }); 
        });

    </script>
</head>
<body>

    <div class="container">
    <form id="form" method="post"  >

            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Planta:</label>
                <select id="pl_1" class='planta' required name="planta">
                <option value="0">- Select -</option>                       
                <?php
                $sql_plantas = "SELECT * FROM plantas";
                $pl_data = mysqli_query($con,$sql_plantas);
                while($row = mysqli_fetch_assoc($pl_data) ){
                    $id_pl = $row['id_pl'];
                    $nombre_pl = $row['nombre_pl'];
                    echo "<option value='".$id_pl."' >".$nombre_pl."</option>";
                }
                ?>
                </select>
            </div>

            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Solicitante:</label>
            <input type='text' class="solicitante" id='solicitante_1' name="codigoUsu"> 
            </div>

            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Codigo PT:</label>
            <input type='text' class='codigoP' id='codigoP_1' placeholder='Enter código' name="cod_PT"> 
            </div>
            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Descripción PT:</label>
            <input type='text' class="descripcion" id='descripcion_1' name="desc_PT" > 
            </div>
            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Lote:</label>
            <input type='text' class="lote" id='lote_1' name="lote"> 
            </div>

            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Fecha de fabricación:</label>
            <input type='date' class='ffab' id='ffab_1' onchange="calcularFV()" name="ffab"> 
            </div>
            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Fecha de vencimiento:</label>
            <input type='text' class="fv" id='fv_1' name="fven" > 
            </div>
            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Vida Util:</label>
            <input type='number' class="vidaUtil" id='vidaUtil_1' onchange="calcularFV()" name="vida_util">
            </div>

            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Código de etiqueta:</label>
            <input type='text' class='codigoE' id='codigoE_1' placeholder='Enter código' name="cod_etq">
            </div>
            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Descripción de etiqueta:</label>
            <input type='text' class="descripcionE" id='descripcionE_1' name="desc_etq"> 
            </div>
            <div class=" col-xs12 col-sm-12 col-md-12 col-lg-12 offset-md-12">
            <label>Cantidad:</label>
            <input type='text' class="cant" id='cant_1' name="cantidad"> 
            </div>

            <button type="button" id="btn_guardar" name="btn_guardar" onclick="guardar()">Guardar</button><br><br>  


    </form>

     <div id="adicionados">
        <table  id="mytable"  border="1">
              <tr>
                            <th>Planta</th>
                            <th>Solicitante</th>
                            <th>Codigo PT</th>
                            <th>Descripción PT</th>
                            <th>Lote</th>
                            <th>Fecha de fabricación</th>
                            <th>Fecha de vencimiento</th>
                            <th>Vida Util</th>
                            <th>Código de etiqueta</th>
                            <th>Descripción de etiqueta</th>
                            <th>Cantidad</th>
                            <th>Cancelar</th>
              </tr>
            </table>
        </div>

</div>

</body>
</html>

no me muestra error por consola pero estoy casi segura que la falla está en esta linea:

id = jQuery(this).parent().attr("row");

la verdad es que no se como captar la fila que debe borrar y supongo que no está enviando nada al archivo php que debe ejecutar la instrucción de borrar.Sin embargo dejo también el codigo php x si me equivoco, pues soy aprendiz.

<?php 

include "config.php"; 

if(isset($_POST['id'])) {
    $idE = $_POST['id'];
    $query = "DELETE FROM solicitudes WHERE id_solicitud = $idE"; 
    $result = mysqli_query($con, $query);

    if ($result){
      echo "1";
    }else {
      echo "0";
    }
  }


?>

Agradezco mucho cualquier colaboración

2
  • 1
    Felicidades por la claridad de tu código, da gusto leer un programa así. En cuanto a la pregunta, cambia esta línea: id = jQuery(this).parent().attr("row"); por esto: id = $(this).parent().attr("row"); y haz un console.log(id); revisa la consola de Javascript y dinos si está capturando el id o no. O pon un alert("ID:" + id);
    – A. Cedano
    Commented el 25 oct. 2019 a las 22:03
  • 1
    Siendo que es una tabla, quizá tengas que buscar el id de este modo: var $mRow = $(this).closest("tr"); // La fila donde está el botón var $mTds = $mRow.find("td"); // Todos los <td> de la fila Y luego el ID lo buscas según el índice de la celda, si es la primera var id=$mTds[0].text(); donde [0] indicaría la 1ª celda de la fila.
    – A. Cedano
    Commented el 25 oct. 2019 a las 22:24

2 respuestas 2

2

te felicito por intentar aprender por tus propios medios. No conseguiras una respuesta si solo haces desde el servidor un echo. Debes especificar que tipo de respuesta quieres retornar; puede ser un XML o JSON, esto dependerá de las necesidades de tu proyecto. El formato JSON es bastante fácil de usar, dado que a la larga lo recibirás en javascript como un objeto. Por ahora puedes agregar en tu archivo .php la siguiente linea de codigo:

header('Content-Type: application/json');

Te recomiendo que investigues mas al respecto. Para hacer tu aplicación un poco mas robusta deberías agregar excepciones.

    tr{
    header('Content-Type: application/json');
    echo "codigo 200";
// tus consultas y demas codigo
    }catch(Exception $e){
    http_response_code(500);
    echo "Ocurrio un error..";
    }

Espero que esto te acerque un poco mas. Suerte.

1

Tienes razón en darte cuenta que el error se encuentra en

id = jQuery(this).parent().attr("row");

El parent del this del button que hace la acción de delete te lleva al padre inmediato, en este caso td

Te comparto algunas sugerencias que utilizo con jQuery

//Añade atributos de tipo data

<tr data-id="' + i + '">

// De esta forma, para obtener el id lo haces asi

var id=$(this).parent('tr').data('id');

A su vez, te recomiendo que la siguiente acción la coloques dentro del if y no antes

jQuery(this).parent().remove()

//Sustituir por
$(this).parent('tr').remove();

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.