0

Tengo este codigo en un archivo .js, que al cargar la pagina lista os clientes, en cada fila de la tabla hay un editar, un baja y un alta.

como veran tengo un codigo en el evento click pero no responde con nada:

$(document).ready(function() {
    listar();
    $("#nombre").keyup(function() {
            
        nombreBusqueda=$("#nombre").val();
        filtrar(nombreBusqueda);
    }
);
$('input[name=baja]').click(function(){
   
       var id=$(this).attr('id');
     
        accion='baja';
           $.ajax({

   
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id}, 
           

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
                alert("Baja exitosa");
                href="modules/cliente/edicionCliente.php"
           }
           
        
});
   
      });
      $('input[name=alta]').click(function(){
   
       var id=$(this).attr('id');
     
        accion='alta';
           $.ajax({

   
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id}, 
           

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
                alert("Alta exitosa");
                href="modules/cliente/edicionCliente.php"
           }
           
        
});
   
      });
$("#editar").click(function(){
    
    alert("dd");

  var accion="obtener";

        
        $.ajax({

   
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id}, 
             dataType:"json",

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
        
            $("#Nombre").val(data[0].nombre);
            $("#CUIT").val(data[0].CUIT);
            $("#Fijo").val(data[0].telfijo);
            $("#Celular").val(data[0].celular);
            $("#domicilio").val(data[0].direccion);
           }
           
        });   
        });
$("#guardar").click(function(){
    var CUIT;
    var fijo;
    var celular;
    var domicilio;
   var accion="guardar";
   var nombre=$("#Nombre").val();
   if ($("#CUIT").val()==""){
    CUIT=0;
   }else{
     CUIT=$("#CUIT").val();
   }
   if ($("#Fijo").val()==""){
    fijo=0;
   }else{
     fijo=$("#Fijo").val();
   }
   if ($("#Celular").val()==""){
    celular=0;
   }else{
     celular=$("#Celular").val();
   }
   if ($("#Celular").val()==""){
    domicilio=0;
   }else{
     domicilio=$("#domicilio").val();
   }
  
 
   $.ajax({

   
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id,"nombre":nombre,"CUIT":CUIT,"fijo":fijo,"cel":celular,"domicilio":domicilio}, 
           

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
                alert("Actualizacion exitosa");
                href="modules/cliente/edicionCliente.php"
           }
           
        
});

        
 
	 });

    
  
      });
      function filtrar(dato){
        var filtrado=[];
        var existe;
    for(var i = 0; i < content.length; i++) {
    if (content[i].nombre.toLowerCase().indexOf(dato.toLowerCase())!=-1) {
        filtrado.push(content[i]);
        
       
    }
}
     if (filtrado.length>0) {
        
      $("#clientes tbody").empty();
        
              for (var i = 0; i < filtrado.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + filtrado[i].CUIT + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].celular + "</td>" +
                    "<td>" + filtrado[i].direccion + "</td>" +
                    "<td>" + filtrado[i].deduda + "</td>" +
                     "<td>"+
          "<a class='btn btn-warning' href='index.php?controller=cliente&action=editar&id="+filtrado[i].idcliente+"'>Editar</a>"+
            "<input type='button' id="+filtrado[i].idcliente+" value='Baja' name='baja' class='btn btn-danger'/>"+
        "<input type='button' id="+filtrado[i].idcliente+" value='Alta' name='alta' class='btn btn-primary' /></td>"+
                    "</tr>";                 
        $(newRow).appendTo("#clientes tbody");
    
               
            }
	
  
}};
function listar(){

    accion="listar";
	 $.ajax({
	  
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: { "accion": accion}, 
            dataType: "json",
            error: function(){
                alert("error petición ajax");
            },
            success: function(filtrado){
           content=filtrado;
               for (var i = 0; i < filtrado.length; i++) {

                var newRow =
                    "<tr>" +
                 
                    "<td>" + filtrado[i].CUIT + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].celular + "</td>" +
                    "<td>" + filtrado[i].direccion + "</td>" +
                    "<td>" + filtrado[i].deduda + "</td>" +
                     "<td>"+
         "<a class='btn btn-warning' href='index.php?controller=cliente&action=editar&id="+filtrado[i].idcliente+"'>Editar</a>"+
            "<input type='button' id="+filtrado[i].idcliente+" value='Baja' name='baja' class='btn btn-danger'/>"+
        "<input type='button' id="+filtrado[i].idcliente+" value='Alta' name='alta' class='btn btn-primary' /></td>"+
                    "</tr>";
               $(newRow).appendTo("#clientes tbody");                
        
    
               
            }
         
  

        }  
});
};  

El filtrado funciona perfecto y si carga los datos obviamente. Es la baja y el alta lo que no funciona alguna sugerencia?

0

3 respuestas 3

2

El problema es que creás los botones después de asignar los eventos click, o sea, cuando hacés el "$('input[name=baja]').click(...." los botones todavía no existen.

Deberías reemplazar esa asignación del click por un evento que sea llamado desde el botón. Por ejemplo, la función de baja sería algo así:

function baja(elem){
       var id=$(elem).attr('id');
       accion='baja';
           $.ajax({
            type: "POST",
            url: "../gestionweb/views/modules/cliente/includes/editarCliente.php",
            data: {"accion":accion,"id":id}, 
            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
                alert("Baja exitosa");
                href="modules/cliente/edicionCliente.php"
           }      
});

y cuando creás el botón deberías hacerlo así:

...
"<input type='button' onclick='baja(this)' id="+filtrado[i].idcliente+" value='Baja' name='baja' class='btn btn-danger'/>"+
...

¡Suerte!

2
  • 1
    onclick="baja(this)" y la funcion debe ser algo como function baja(elem){ var id=elem.attr('id'); ..... Commented el 30 oct. 2018 a las 13:59
  • Es verdad, ya lo corrijo Commented el 30 oct. 2018 a las 14:01
1

una de las razones por la cual los objetos creados dinámicamente parezcan no responder a los eventos, es que, cuando escribiste esta parte: $('input[name=baja]').click() los botones aún no existían, entonces los botones que luego se crearon no tienen "asignado" ese evento.

Lo que puedes hacer es llamar a un elemento que ya esta creado, como el document:

$(document).on('click','input[name=baja]',function(){
    //  aquí metes el código
});

Espero te sirva.

0

si los botones estan creados dinamicamente te aconsejaria de utilizar la siguiente estructura:

 $("padre").on("click", "input[name=baja]", function() {
     //lo que queres que haga
 }

ahora tu boton esta al interno de una tabla, si la tabla tiene algun id o clase usa ese selector en lugar de $("padre"), esta estructura se utiliza con los elementos creados dinamicamente.

espero que te sea de ayuda

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.