2

Problema Tengo una tabla en ajax que me itera toda la información que necesito.Cuando hago click en un checkbox parece que no hace uso de una función que le tengo asignada, pero cuando pongo el mismo checkbox fuera de la tabla si hace uso de la función.

ACLARAR la tabla me itera la info bien, y otras funciones sobre la tabla me funcionan bien, el problema son en los checkboxs

Body de la tabla JS


    let form = $("#multi-filters");
    $.ajax(
        {
            type: "POST",
            url: "../../Modelo/Filter.php",
            data: form.serialize(),
            success: function (data) {
                $("#filters-result").html("");


                $.each(JSON.parse(data), function (key, User) {
                    let row = "" +
                        "<tr>" +
                        // "<td>"+key+"</td> " +
                        "<td> <input name='checks[]' type='checkbox' value=" + key + "  class='chk-box'/></td>" +
                        "<td>" + User.Nombre + " " + User.Apellido + "</td> " +
                        "<td>" + User.NombreEntidad + "</td> " +
                        "<td>" + User.NombreActividad + "</td> " +
                        "<td>" + User.NombreOrg + "</td> " +

                       
                        "<td> <center><button  id='Eliminar' class='btn btn-danger' onclick='Delete(" + key + ")' ><i class='fas fa-minus-circle'></i></button> <button id='Edit' class='btn btn-secondary' onclick='Edit(" + key + ")'  ><i class='fas fa-edit'></i></button></center></td>"+
                        "</tr>";
                    $("#filters-result").append(row);
                });

            }
        }
    )
}

Funcion para el checkbox

    $('document').ready(function () {
    $(".select-all").click(function () {
        $('.chk-box').attr('checked', this.checked)
    });
    $(".chk-box").click(function () {
        if ($(".chk-box").length == $(".chk-box:checked").length) {
            $(".select-all").attr("checked", "checked");
        }
        else {
            $(".select-all").removeAttr("checked");
        }
    });
        
});


$('document').ready(function () {
    // $('[name="checks[]"]').change(function () {
        // var arr = $('[name="checks[]"]:checked').map(function () {
        $('[name="checks[]"]').change(function () {
        var arr = $('[name="checks[]"]:checked').map(function () {
            return this.value;
        }).get();
        var str = arr.join(',');
        var Number=(arr.length);
        $('.NumeroCorreos').addClass('vistaNum').removeClass('NumeroCorreos');
        $('#numeroCorreos').text(Number);
        document.getElementById("Number").value = Number;
        document.getElementById("entrar").value = str;
    }
    );
});

Lo que hace las funciones es cuando le doy click a algún checkbox me guarda el valor del mismo y me suma el numero total de checkbox seleccionados.

he intentado de varias formas solucionarlo pero no doy con la solucion,si alguien me puede echar una mano estaría muy agradecido ...

USO

JQUERY, AJAX Y JAVASCRIPT

3
  • Intenta color en la petición AJAX la propiedad async: false, coloca el checkbox dentro y verifica si te funciona ahora.
    – lsanchezo
    Commented el 16 may. 2022 a las 16:17
  • sigue igual bro...
    – kvega
    Commented el 16 may. 2022 a las 16:26
  • Podrías intentar añadir al nombre 'checks[] el valor + key + asi cada checkbox tiene un "nombre" diferente en relación al renglón al que pertenece.
    – Cesarin
    Commented el 16 may. 2022 a las 16:33

2 respuestas 2

2

El problema se debe a que al cargarse el documento, estas buscando los checkbox que existen en ese momento, es decir, ningúno de los que se van a crear cuando responda la solicitud ajax.

Solución:

Una opción es usar delegación de eventos. En pocas palabras, suscribir el evento a un elemento existente (y que contenga a los futuros elementos que serán creados) y condicionarlo a que solo se ejecute cuando dicho evento es originado por el selector indicado.

Ejemplo:

$('document').ready(function() {

  // Usamos delegación de eventos
  $('document').on('change', 'input[name="checks[]"]', function() {
    var arr = $('[name="checks[]"]:checked').map(function() {
      return this.value;
    }).get();
    var str = arr.join(',');
    var Number = (arr.length);
    $('.NumeroCorreos').addClass('vistaNum').removeClass('NumeroCorreos');
    $('#numeroCorreos').text(Number);
    document.getElementById("Number").value = Number;
    document.getElementById("entrar").value = str;
  });
});
1

Por lo que veo, las checkboxes son dinámicas y no estáticas.

El problema es que estas intentando obtener un elemento que para el DOM no existe, aún si lógicamente si. En este caso, .chk-box es creado después de que el DOM fue creado.

En estos casos necesitas acceder a este elemento desde otro elemento que ya exista, y desde el cual puedas acceder usando las reglas de selectores de CSS.

Para esto, si estas usando jQuery, basta con que uses document como elemento principal, y apartir de el acceder al elemento que desees.:

$(document).on('click', '.chk-box', function(){ 
   // Aquí va tu codigo
});
1
  • Eres muy inteligente bro ... Muchas gracias !!!
    – kvega
    Commented el 16 may. 2022 a las 16: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.