0

Utilizo datatables server-side primero para traerlo de la bd y despues agregar ese producto seleccionado a una clase para irse agregando los productos que se deseen. Esto ya lo pude hacer, mi problema es que ahora quiero deshabilitar el boton que agrega el producto seleccionado y lo que e conseguido es que me deshabilita todos los botones de todos los productos. Les comparto el codigo que tengo hasta ahora:

var tablaCreapedidos = $(".tablaCreapedidos").DataTable({
responsive: true,
deferRender: true,
processing: true,
serverSide: true,
ajax: "ajax/serversideCreapedido.php",
columnDefs: [{
    "targets": 4,
    "data": null,
    "render": function (data, type, row){
        'use strict';
        return '<div class="btn-group"><button class="btn btn-info btn-sm btnAgregarProducto" id="' + row[0] + '"><i class="fas fa-plus-circle"></i></button></div>';
    }
},
{
 "targets": 3,
 "render": function (data, type, row) {
    'use strict';
    if (data === "") {
        return '<img src="vista/img/productos/default/producto.png" class="img-thumbnail" width="40px">';
    } else {return '<img src="' + data + '" class="img-thumbnail" width="40px">'; }
 }
}],
language: {
    url: 'plugins/datatables/Spanish.json'
} 
});

Lo anterior es para iniciar la tabla, ahora les muestro donde traigo el producto:

i$(document).on("click", ".btnAgregarProducto", function () {
'use strict';
var idProdpe = $(this).attr("id");
var datos = new FormData();
datos.append("idProduct", idProdpe);
$.ajax({
    url: 'controlador/traerProducto.php',
    method: "POST",
    data: datos,
    cache: false,
    contentType: false,
    processData: false,
    dataType: "json",
    success: function (respuesta) {
        tablaCreapedidos.on('draw', function(){
            $(".btnAgregarProducto").removeClass("btn-info");
            $(".btnAgregarProducto").addClass("btn-outline-info disabled"); 
        }).ajax.reload(null, false);
        var nombre = respuesta.nombre_producto;
        var costo = respuesta.precio_venta;
        $(".nuevoPropedido").append(
            '<div class="row">'+
             '<div class="col-5" style="padding-right:0px">'+
              '<div class="input-group mb-3">'+
               '<div class="input-group-prepend">'+
                '<button type="button" class="btn btn-danger btnQuitarProducto" idProdpe="'+idProdpe+'"><i class="fas fa-times"></i></button>'+
               '</div>'+      
               '<input type="text" class="form-control" id="agregarPropedido" name="agregarPropedido" value="'+nombre+'" readonly>'+
              '</div>'+
             '</div>'+
             '<div class="col-3">'+
              '<input type="number" class="form-control" id="agregarProcantidad" name="agregarProcantidad" min="1" step="1" value="1">'+
             '</div>'+
             '<div class="col-4" style="padding-left:0px">'+
              '<div class="input-group mb-3">'+
               '<div class="input-group-prepend">'+
                '<label class="input-group-text"><i class="fas fa-dollar-sign"></i></label>'+
               '</div>'+
               '<input type="text" class="form-control" id="agregarProprecio" name="agregarProprecio" value="'+costo+'" readonly>'+
              '</div>'+
             '</div>'+
            '</div>'
         );
    }
});
});

Con este codigo solo consigo que todos los botones se deshabiliten:

introducir la descripción de la imagen aquí

Y con el siguiente codigo todos se vuelven a habilitar:

$(".formCreapedido").on("click", ".btnQuitarProducto", function () {
'use strict';
$(this).parent().parent().parent().parent().remove();
var idProdpe = $(this).attr("idProdpe");
tablaCreapedidos.on('draw', function(){
    $(".btnAgregarProducto").removeClass("btn-outline-info disabled");
    $(".btnAgregarProducto").addClass("btn-info"); 
}).ajax.reload(null, false);
});

introducir la descripción de la imagen aquí

como puedo hacer para que solo se deshabilite el boton del producto que se selecciona?

2 respuestas 2

1

Antes de empezar, un error importante es asignar eventos dentro de otros eventos, porque se encadenan, por ejemplo:

$(document).on("click", ".btnAgregarProducto", function () {
    tablaCreapedidos.on('draw', function() {
        // ¿Cuántas alertas se muestran en cada clic?
        alert('Producto agregado');

        $(".btnAgregarProducto").removeClass("btn-info");
        $(".btnAgregarProducto").addClass("btn-outline-info disabled"); 
    }).ajax.reload(null, false);
});

Lo más seguro es que con cada clic en botones para agregar productos se vayan incrementando las alertas.

Posible solución:

El problema es que $(selector).removeClass(clase); quita la clase especificada a todos los elementos que coincidan con el selector, no solo a uno. Cuando asignas evento a un selector, dentro de la función puedes acceder al elemento que disparó el evento con $(this) y aplicar los cambios solo ahí.

Cambia la función tablaCreapedidos.on('draw', function() { ... }).ajax.reload(null, false); por las siguientes tres líneas para desactivar solo el botón correspondiente.

            // Deshabilitar solo el botón que recibió clic
            $(this).removeClass("btn-info");
            $(this).addClass("btn-outline-info disabled");

Esto resuelve solo el botón del producto actual, pero todavía falta que se desactive otra vez cuando la tabla obtenga nuevos datos y vuelva a aparecer el mismo producto. Para eso se necesita identificar fácilmente qué productos están agregados y, lo más sencillo, es agregar id de producto como atributo de datos en el contenedor:

$(document).on("click", ".btnAgregarProducto", function () {
    'use strict';
    var idProdpe = $(this).attr("id");
    var datos = new FormData();
    datos.append("idProduct", idProdpe);
    $.ajax({
        url: 'controlador/traerProducto.php',
        method: "POST",
        data: datos,
        cache: false,
        contentType: false,
        processData: false,
        dataType: "json",
        success: function (respuesta) {
            // Deshabilitar solo el botón que recibió clic
            $(this).removeClass("btn-info");
            $(this).addClass("btn-outline-info disabled");

            var nombre = respuesta.nombre_producto;
            var costo = respuesta.precio_venta;
            $(".nuevoPropedido").append(
                // Agregar ID de producto como atributo de datos
                '<div class="row" data-prodpe="' + idProdpe + '">'+
                 '<div class="col-5" style="padding-right:0px">'+
                  '<div class="input-group mb-3">'+
                   '<div class="input-group-prepend">'+
                    '<button type="button" class="btn btn-danger btnQuitarProducto" idProdpe="'+idProdpe+'"><i class="fas fa-times"></i></button>'+
                   '</div>'+      
                   '<input type="text" class="form-control" id="agregarPropedido" name="agregarPropedido" value="'+nombre+'" readonly>'+
                  '</div>'+
                 '</div>'+
                 '<div class="col-3">'+
                  '<input type="number" class="form-control" id="agregarProcantidad" name="agregarProcantidad" min="1" step="1" value="1">'+
                 '</div>'+
                 '<div class="col-4" style="padding-left:0px">'+
                  '<div class="input-group mb-3">'+
                   '<div class="input-group-prepend">'+
                    '<label class="input-group-text"><i class="fas fa-dollar-sign"></i></label>'+
                   '</div>'+
                   '<input type="text" class="form-control" id="agregarProprecio" name="agregarProprecio" value="'+costo+'" readonly>'+
                  '</div>'+
                 '</div>'+
                '</div>'
             );
        }
    });
});

Ahora se necesita una función para activar y desactivar botones, recorriendo cada uno y revisando si el producto ya está agregado.

function checarBotones() {
    // Recorrer botones
    $(".btnAgregarProducto").each(function() {
        // Obtener id de producto
        let idProdpe = $(this).attr('id');
        // Verificar si el producto ya se agregó a pedido
        // Buscando por contenedor, clase y atributo de datos
        if($(`.nuevoPedido .row[data-prodpe="${idProdpe}"]`).length > 0) {
            // El producto está agregado, desactivar botón
            $(this).removeClass("btn-info");
            $(this).addClass("btn-outline-info disabled");
        } else {
            // No está agregado, activar botón
            $(this).addClass("btn-info");
            $(this).removeClass("btn-outline-info disabled");
        }
    });
}

Cuando la tabla se actualice debes ejecutar esa función para activar o desactivar cada botón, dependiendo de si está agregado al pedido o no. Recuerda poner esta línea fuera de cualquier función, no debe depender de otros eventos.

tablaCreapedidos.on('draw', checarBotones);

Finalmente, cuando eliminas un producto del pedido solo necesitas volver a ejecutar la función para actualizar botones:

$(".formCreapedido").on("click", ".btnQuitarProducto", function () {
    'use strict';
    // En lugar de usar tantos parent() llega al padre con closest()
    $(this).closest('div.row').remove();
    // Actualizar botones
    checarBotones();
});

Referencias:

  • .length devuelve la cantidad de elementos que jQuery encontró para el selector especificado
  • .parent() devuelve el padre inmediato y, a veces, es necesario usar varios para llegar al que realmente se desea seleccionar
  • .closest() devuelve el ancestro que coincide con el selector, sin necesidad de hacerlo en varios pasos

Importante: Si el identificador de producto es numérico, entonces también es un error asignarlo como atributo ID del botón:

return '<div class="btn-group"><button class="btn btn-info btn-sm btnAgregarProducto" id="' + row[0] + '"><i class="fas fa-plus-circle"></i></button></div>';

Según la documentación:

Nota: El uso de caracteres a excepción de letras en ASCII, dígitos, '_', '-' y '.' pueden ocasionar problemas de compatibilidad, por no ser permitidos en HTML 4. A pesar de que esta limitación ha sido removida en HTML 5, un ID debe iniciar con una letra para asegurar la compatibilidad.

2
  • la respuesta que proporcionas es muy completa y valida en el caso de no utilizar server-side, me explico: con tu respuesta si se desactiva el botón, aunque al dar clic en los botones de la paginación (siguiente, anterior) o en el de mostrar x registros el boton vuelve a activarse. Encontré una solución a esto, enseguida posteo mi respuesta.
    – Hugo
    Commented el 14 may. 2021 a las 19:33
  • 1
    @Hugo, no me había dado cuenta de que sobraba la recarga por AJAX y el evento debería quedar solo así: tablaCreapedidos.on('draw', checarBotones);
    – Triby
    Commented el 14 may. 2021 a las 19:36
1

Bien, la solución que encontré para que en la tabla me mostrara los botones habilitados/deshabilitados al darle clic a los botones de paginación y a la opción de mostrar x registros por pagina, es la siguiente:

En la parte de inicializar la tabla la deje de este modo:

"targets": 4,
    "data": null,
    "render": function (data, type, row){
        'use strict';
        /*dejo 2 clases: bntAgregarProducto - recuperarBoton*/
        /*capturo el id del producto*/
        return '<div class="btn-group"><button class="btn btn-info btn-sm btnAgregarProducto recuperarBoton" idProducto="' + row[0] + '"><i class="fas fa-plus-circle"></i></button></div>';
    }

Ahora dentro donde traigo al producto lo deje así:

tablaCreapedidos.on('draw', function(){
    /*aqui le quito la clase btnAgregarProducto para que no se vuelva */
    /*a disparar nuevamente la función, agrego la clase para cambiar el*/
    /*aspecto del boton y deshabilitarlo, todo esto donde*/
    /*idProducto sea igual al boton donde di clic y redibujo la tabla*/
    $(".recuperarBoton[idProducto='" + idProdpe + "']").removeClass("btn-info btnAgregarProducto");
    $(".recuperarBoton[idProducto='" + idProdpe + "']").addClass("btn-outline-info disabled"); 
}).ajax.reload(null, false);

Finalmente para habilitar nuevamente el botón lo deje de esta manera:

$(".formCreapedido").on("click", ".btnQuitarProducto", function () {
'use strict';
$(this).closest('div.row').remove();
var idProdpe = $(this).attr("idProdpe");
tablaCreapedidos.on('draw', function(){
    /*lo inverso a cuando deshabilite el boton*/
    $(".recuperarBoton[idProducto='" + idProdpe + "']").removeClass("btn-outline-info disabled");
    $(".recuperarBoton[idProducto='" + idProdpe + "']").addClass("btn-info btnAgregarProducto"); 
}).ajax.reload(null, false);
});

Con esto ya navego en toda la tabla y me respeta los botones habilitados/deshabilitados. A como yo lo entiendo (desde ya me pueden corregir, esto que hice es solo una solución), cada que se da clic en un botón habilitado se tiene que "dibujar" la tabla nuevamente mostrando ahora el mismo botón pero deshabilitado, igual a la inversa, es decir, al habilitar nuevamente el botón volver a "dibujar" la tabla. Aquí dejo un ejemplo donde mi problema inicial probablemente sirviera de solución al igual que se hace mención de draw().

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.