1

tengo un código el cual realizo en JS tengo un Datatable que me lista datos traidos de una base de datos , le agregue 2 boton uno para aprobar y otro para eliminar , pero no se como darles funcionalidad , cree un jquery click function el cual me llama a las clases que les di a los botones , pero no funciona. Mi gran duda es como poder darle funcionalidad a estos botones que están dentro de mi Datatable.

 $(document).ready(function()
{
console.log("ready");
cargarCampos(3);
obtenerReqAprobacion();

// TableManageDefault.init();
});

 function obtenerReqAprobacion()
{

let filas, cabecera;
let resultados=[];
let formData= new FormData();

filas="";
ajaxDinamicoForm("mesa_ayuda/obtenerReqAprobacion", formData, function(data)
{

    console.log(data);
    resultados=data.resultados;


        cabecera="<tr>";
        cabecera+="<th data-orderable='false'>N°</th>";
        cabecera+="<th>Req</th>";
        cabecera+="<th>Solicitante</th>";
        cabecera+="<th>VB de</th>";
        cabecera+="<th>Descripcion Breve</th>";
        cabecera+="<th>Responsable</th>";
        cabecera+="<th>Observacion</th>";
        cabecera+="<th>Comentario</th>";
        cabecera+="<th>Accion</th>";
        cabecera+="</tr>";


    $("#data-table-default").find("thead").html(cabecera);



        for(let i=0; i < data.resultados.length;i++)
        {

            filas+="<tr>";
            filas+="<td>"+(i+1)+"</td>";
            filas+="<td><a href='mesa_ayuda/detalle?req="+resultados[i].cod_requerimiento+"' class='label label-inverse'>"+resultados[i].cod_requerimiento+"</a> </td>";
            filas+="<td>"+resultados[i].nCreador+"</td>";
            filas+="<td>"+resultados[i].nUsuario+"</td>";
            filas+="<td>"+resultados[i].DescripcionBreve+"</td>";
            filas+="<td>"+resultados[i].nResponsable+"</td>";
            filas+="<td>Ventaja: "+resultados[i].Ventaja+"<br> Desventaja: "+resultados[i].Desventaja+"</td>";
            filas+="<td><textarea id=tbComentario_"+resultados[i].cod_requerimiento+"' name='tbComentario_"+resultados[i].cod_requerimiento+"'  maxlength='255' rows='3'></textarea></td>";
            filas+="<td><button type='button' id='btnA"+resultados[i].cod_requerimiento+"' class='btn btn-primary envio aprob'> Aprobar </button> <button type='button' id='btnR"+resultados[i].cod_requerimiento+"' class='btn btn-danger envio neg'> Rechazar</button></td>";
            filas+="</tr>";

        }

    $("#data-table-default").find("tbody").html(filas);



    if ($('#data-table-default').length !== 0)
    {
        $('#data-table-default').DataTable(
        {


            responsive: true,
            "language":
            {
                "decimal":        "",
                "emptyTable":     "No hay solicitudes de aprobación disponibles.",
                "info":           "Mostrando _START_ al _END_ de _TOTAL_ registro(s)",
                "infoEmpty":      "Mostrarndo 0 a 0 de 0 registro(s)",
                "infoFiltered":   "(filtered from _MAX_ total entries)",
                "infoPostFix":    "",
                "thousands":      ",",
                "lengthMenu":     "Mostrar _MENU_ registros",
                "loadingRecords": "Cargando...",
                "processing":     "Procesando...",
                "search":         "Buscar:",
                "zeroRecords":    "No matching records found",
                "paginate": {
                    "first":      "Primero",
                    "last":       "Último",
                    "next":       "Siguiente",
                    "previous":   "Anterior"
                },
                "aria": {
                    "sortAscending":  ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                }
            }

        });

        $(".envio").click(function(){
            var n          = $(this).attr("id").lastIndexOf("_") + 1;
            var id_Req     = $(this).attr("id").substring(n,$(this).attr("id").length);       //Obtengo el ID
            var comentario = $("#tbComentario_" + id_Req);

            var aprobacion;

            if ($(this).hasClass('aprob') == true)
            { aprobacion = 1; }
            else
            { aprobacion = 0; }

            if ($.trim(comentario.val()) == "")
            { comentario.parent().addClass("error");
              $("#tbComentario_" + id_Req).focus();
              return false; }
            else
            {
              $.post("mesa_ayuda/actualizaResponsableAprob",{ req:id_Req ,
                                                             comentario:comentario.val() ,
                                                             aprobado:aprobacion }, 
             function(data) {

                { window.location = "baprobacion.asp?m=1" }
              });
            }
          });
    }

})

1 respuesta 1

2

Eso es porque son elementos creados dinamicamente, es decir que no lo alcanzas normalmente ya que fueron insertados en un segundo momento en el DOM.

para llegar a esos botones tendrias que hacer lo siguiente:

$(document).ready(function(){

      $("#table").append("<tr><td><button id='enviar' type='button'>enviar</button></td></tr>");

      $("#table").on("click", "#enviar", function(){
          console.log("dato enviado");
      });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
</table>

para incorporarlo en tu codigo tendrias que hacer lo siguiente :

 $("#IdElementoPadre").on("click", "#IdTarget", function(){});

en cual el elemento padre tiene que ser un elemento que este presente en el DOM, osea ya definido en el HTML y el target seria el boton.

en caso que este metodo no te funcione otra alternativa, que personalmente no me gusta, pero tambien funciona es simplemente crear una funcion y ponerlo como onclick en el HTML :

<button type="buton" id="enviar" onclick="myFunction()">enviar</button>

espero que te sea de ayuda, exitos

2
  • Gracias , me ha funcionado estoy capturando la clase, pero como capturo la id realize esto con tu ejemplo y en un console log muestro lo que me traen los botones pero quiero capturar el id para darles funcionalidad $("#data-table-default").on("click", ".envio", function(){ var n = $(this).attr("id").lastIndexOf("") + 1; var id_Req = $(this).attr("id").substring(n,$(this).attr("id").length); //Obtengo el ID var comentario = $("#tbComentario" + id_Req);
    – Daniela
    Commented el 18 ene. 2019 a las 15:17
  • de nada un placer, y si, funciona exactamente igual sea con clase que con id y sirve para todos los elementos creados dinamicamente, no solo botones
    – Federico
    Commented el 18 ene. 2019 a las 15:19

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.