1

Tengo una tabla, el cual voy agregando elemento dinamicamente desde una colsulta a la base de datos y ajax.

<table id="detalleMaquinasOrdenRetiro">
   <thead>
      <tr>
         <th width="80">Item</th>
         <th>Serie</th>
         <th>Código</th>
         <th>Descripción</th>
         <th width="30">Cantidad</th>
         <th></th>
      </tr>
   </thead>
   <tbody class='items'>

   </tbody>
</table>

Y aqui mi ajax:

var i = 1;
$(document).on("click", ".btnAddMaquina", function (e){

   // Almacenamos el valor de serie
   var serieMaquina = $(this).attr("serieMaq");

   // Valida maquina repetida y elimina fila
   validarMaquinaRepetida();

   var dataMaquina = new FormData();
   dataMaquina.append("serieMaq", serieMaquina);

   $.ajax({
      type: "post",
      url: "listar_maquina.php",
      data: dataMaquina,
      dataType: "json",
      cache: false,
      contentType: false,
      processData: false,
      success: function (response) {

         $(".items").append("<tr>"+
            "<th scope='row'>"+i+"</th>"+
            "<td><input id='serieMaquinaAdd' name='serieMaquinaAdd[]' type='hidden' value='"+response[2]["Serie"]+"'>"+response[2]["Serie"]+"</th>"+
            "<td><input id='codigoMaquinaAdd' name='codigoMaquinaAdd[]' type='hidden' value='"+response[2]["Codigo"]+"'>"+response[2]["Codigo"]+"</td>"+
            "<td><input id='descripcionMaquinaAdd' name='descripcionMaquinaAdd[]' type='hidden' value='"+response[2]["Descripcion"]+"'>"+response[2]["Descripcion"]+"</td>"+
            "<td><input id='cantidadMaquinaAdd' name='cantidadMaquinaAdd[]' type='number' min='1' value='1' size='6'></td>"+
            "<td><button name='btnDelMaquina' serieMaq='"+response[2]["Serie"]+"' class='btn btn-danger btnDelMaquina'><i class='fa fa-trash'></i></button></td>"+
            "</tr>").fadeIn('slow');
         i++;
      }
   })

   e.preventDefault();

});

Buscando, pille un script en este mismo foro, el cual elimina los elementos duplicados que se encuentren en la tabla de forma automatica, el cual me funciona sin problema:

function validarMaquinaRepetida() {

   var values = $("#detalleMaquinasOrdenRetiro tr td:first").map(function(){
      return {e: this, val: $(this).html()};
   });

   $.each(values, function(i,e){
      $.each(values,function(ind,el){
         if(el.val == e.val){
            $(el.e).parents("tr").remove();
         }
      });
   });

}

El asunto es que quiero cambiar ese procedimiento, en vez de remover el elemento repetido, que no sea agregado a la tabla y ademas que despliegue una alerta informando al usuario, pero no logro que funcione de esta forma... Modifique el script haciendo que en vez de realizar el remove, retorne un true la funcion, y asi yo poder validarlo en script donde genero dinamicamente el tr en la tabla y evitar crearlo (no se si me explico bien), pero al hacerlo no funciona, y realizando un console.log, este solo devuelve indefinido:

function validarMaquinaRepetida() {

   var values = $("#detalleMaquinasOrdenRetiro tr td:first").map(function(){
      return {e: this, val: $(this).html()};
   });

   $.each(values, function(i,e){
      $.each(values,function(ind,el){
         if(el.val == e.val){
            return true;
         }
      });
   });

}

Espero me puedan ayudar y de antemano gracias.

3
  • A lo que veo metes el response siempre en su campo [2], entonces que es lo que le estas regresando en esa consulta de ajax, o sea retornas un arreglo, o solo retornas un dato. No sé que tiene el atributo serieMaq, podrías especificar eso para poder ayudarte mejor. Commented el 23 mar. 2020 a las 15:49
  • Me disculpo, te indico: serieMaq es un atributo que posee un boton, el cual contiene el numero de serie de la maquina a insertar en la tabla, el cual con ese atributo, yo consulto en la base de datos y este en respuesta (response) me trae los datos de esa maquina, en un array con el siguiente formato: - array[0], true o false, para validar si se realizo la operacion en la base de datos. - array[1], solo trae el nombre de la tabla que consulto (eso pretendo quitarselo). - array[2], trae todos los datos de la maquina.
    – Oriel
    Commented el 23 mar. 2020 a las 17:04
  • Ya actualice la respuesta que había hecho y te agregue la solución. Commented el 23 mar. 2020 a las 17:13

1 respuesta 1

1

Suponiendo que lo que te está regresando el Ajax es un arreglo para poder llenar la tabla puedes hacerlo de la siguiente manera:

  • Primero creamos un arreglo vacío para guardar los datos que ya has agregado a la tabla.
  • remplazamos la i y el i++ que estabas utilizando.
  • utilizamos un ciclo for donde le indicamos que debe de ser menor a la longitud (lenght) del arreglo response.
  • hacemos un if para verificar si el valor response[i]["Serie"] existe en el arreglo que creamos inicialmente, si no existe entonces agregamos el dato a la tabla con el método append pero en lugar de usar una posición predefinida como lo tenias tu (2), utilizaremos la i del ciclo for.
  • Realizamos un push() del valor que acabamos de agregar a la tabla: arreglo.push(response[i]["Serie"]);.

Entonces básicamente lo que realizara es que cada que recorra el ciclo va a verificar si ese dato ya lo agregaste, si es así lo ignora, de lo contrario lo agrega y lo empuja al arreglo principal. Me base en el valor de "Serie" como si fuese el identificador.

var arreglo = [];
$(document).on("click", ".btnAddMaquina", function (e) {
    // Almacenamos el valor de serie
    var serieMaquina = $(this).attr("serieMaq");

    // Valida maquina repetida y elimina fila
    validarMaquinaRepetida();

    var dataMaquina = new FormData();
    dataMaquina.append("serieMaq", serieMaquina);

    $.ajax({
        type: "post",
        url: "listar_maquina.php",
        data: dataMaquina,
        dataType: "json",
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            for (i = 0; i < response.length; i++) {
                if (arreglo.indexOf(response[i]["Serie"]) == -1) {
                    $(".items").append("<tr>" +
                        "<th scope='row'>" + i + "</th>" +
                        "<td><input id='serieMaquinaAdd' name='serieMaquinaAdd[]' type='hidden' value='" + response[i]["Serie"] + "'>" + response[i]["Serie"] + "</th>" +
                        "<td><input id='codigoMaquinaAdd' name='codigoMaquinaAdd[]' type='hidden' value='" + response[i]["Codigo"] + "'>" + response[i]["Codigo"] + "</td>" +
                        "<td><input id='descripcionMaquinaAdd' name='descripcionMaquinaAdd[]' type='hidden' value='" + response[i]["Descripcion"] + "'>" + response[i]["Descripcion"] + "</td>" +
                        "<td><input id='cantidadMaquinaAdd' name='cantidadMaquinaAdd[]' type='number' min='1' value='1' size='6'></td>" +
                        "<td><button name='btnDelMaquina' serieMaq='" + response[i]["Serie"] + "' class='btn btn-danger btnDelMaquina'><i class='fa fa-trash'></i></button></td>" +
                    "</tr>").fadeIn('slow');
                    arreglo.push(response[i]["Serie"]);
                }
            }
        }
    })
    e.preventDefault();
});

Actualización

Basándonos en tu último comentario puedes entonces emplear lo mismo pero sin el for y también quitándole tu var i y el i++:

var arreglo = [];
$(document).on("click", ".btnAddMaquina", function (e) {

    // Almacenamos el valor de serie
    var serieMaquina = $(this).attr("serieMaq");

    // Valida maquina repetida y elimina fila
    validarMaquinaRepetida();

    var dataMaquina = new FormData();
    dataMaquina.append("serieMaq", serieMaquina);

    $.ajax({
        type: "post",
        url: "listar_maquina.php",
        data: dataMaquina,
        dataType: "json",
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            if (arreglo.indexOf(response[2]["Serie"]) == -1) {
                $(".items").append("<tr>" +
                    "<th scope='row'>" + i + "</th>" +
                    "<td><input id='serieMaquinaAdd' name='serieMaquinaAdd[]' type='hidden' value='" + response[2]["Serie"] + "'>" + response[2]["Serie"] + "</th>" +
                    "<td><input id='codigoMaquinaAdd' name='codigoMaquinaAdd[]' type='hidden' value='" + response[2]["Codigo"] + "'>" + response[2]["Codigo"] + "</td>" +
                    "<td><input id='descripcionMaquinaAdd' name='descripcionMaquinaAdd[]' type='hidden' value='" + response[2]["Descripcion"] + "'>" + response[2]["Descripcion"] + "</td>" +
                    "<td><input id='cantidadMaquinaAdd' name='cantidadMaquinaAdd[]' type='number' min='1' value='1' size='6'></td>" +
                    "<td><button name='btnDelMaquina' serieMaq='" + response[2]["Serie"] + "' class='btn btn-danger btnDelMaquina'><i class='fa fa-trash'></i></button></td>" +
                    "</tr>").fadeIn('slow');
                    arreglo.push(response[2]["Serie"]);
            } else {
                alert('Esta maquina ya existe');
            }
        }
    })
    e.preventDefault();
});
2
  • Muchas gracias estimado! Al principio no me funcionaba, pero era porque en la actualizacion no estaba agregado el push(), corregi eso y ahora funciona perfecto!
    – Oriel
    Commented el 23 mar. 2020 a las 20:43
  • Es verdad ya la edite me falto justo la línea esa, pero con eso debe funcionar sin problema alguno. Saludos! Commented el 23 mar. 2020 a las 20:56

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.