2

Tengo este codigo para listar articulos dentro de un modal:

function listar(){

    tipofiltro="todos";
	 $.ajax({
	  
            type: "POST",
            url: "../gestionweb/includes/php/filtroP.php",
            data: { "tf": tipofiltro}, 
            dataType: "json",
            error: function(){
                alert("error petición ajax");
            },
            success: function(data){
           content=data;
               for (var i = 0; i < data.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + data[i].codalfa + "</td>" +
                    "<td>" + data[i].nombre + "</td>" +
                    "<td>" + data[i].marca + "</td>" +
                    "<td>" + data[i].detalle + "</td>" +
                    "<td>" + data[i].precio + "</td>" +
                         "<td>"+"<input type='text' class='form-control input-sm-2' id='cant' tabindex='3' placeholder='cant'/>" + "</td>" +
   
          
                     "<td>"+
           " <a  class='btn btn-primary' name='agregar' id='"+data.idproducto+"'  >+</a></td>"+
          
                  
                    "</tr>";
                  
                $(newRow).appendTo("#resultadomodal tbody");                 
       
    
               
            }
        
  

        }  
});
};

Y como veran tiene un elemento "a" con el mismo name y el idproducto, la idea es añadir a la cesta, pero no logro detectar el cliock. Lo que hice fue:

  $("a[name=agregar]").click(function(){

   
      alert('hh');   

    });

Selecciono por nombre, luego quisiera obtener el id del elemento que es el id del producto. Codigo completo del js:

$(document).ready(function() {
listar();

$("a[name=agregar]").on('click',function(){


  alert('hh');   

});


var nombreBusqueda;

 $("#nombre").keyup(function() {
            
        nombreBusqueda=$("#nombre").val();
        filtrar(nombreBusqueda);
    });
   $("#cod").keyup(function() {
       
        codBusqueda=$("#cod").val();
        filtrarcod(codBusqueda);
    });
  var id;
  var nombre;
  var marca;
  var producto;
    var precio;


$("#Agregar").click(function(event){
  var cantidad=$("#cant").val();
  
  if (cantidad!==""){
    var accion = "agregar";
    $.ajax({
	  
            type: "POST",
            url: "../gestionweb/includes/php/procesoDetalle.php",
            data: {accion,id,cantidad,nombre,marca,precio}, 
  dataType:'html',
            error: function(){
                alert("error petición ajax");
            },
            success: function(data){
             alert('agre');      
                      
            }
        }).fail( function( jqXHR, textStatus, errorThrown ) {

  if (jqXHR.status === 0) {

    alert('Not connect: Verify Network.');

  } else if (jqXHR.status == 404) {

    alert('Requested page not found [404]');

  } else if (jqXHR.status == 500) {

    alert('Internal Server Error [500].');

  } else if (textStatus === 'parsererror') {

    alert('Requested JSON parse failed.');

  } else if (textStatus === 'timeout') {

    alert('Time out error.');

  } else if (textStatus === 'abort') {

    alert('Ajax request aborted.');

  } else {

    alert('Uncaught Error: ' + jqXHR.responseText);

  }

});

    
  } else{
    alert("ingrese cantidad");
  }
});



function filtrarcod(dato){
        var filtrado=[];
        var existe;
    for(var i = 0; i < content.length; i++) {
 if (content[i].codalfa.toLowerCase().indexOf(dato.toLowerCase())!=-1) {
        filtrado.push(content[i]);
        
       
    }
}
     if (filtrado.length>0) {
        
            $("#resultadomodal tbody").empty();
        
            for (var i = 0; i < filtrado.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + filtrado[i].codalfa + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].marca + "</td>" +
                    "<td>" + filtrado[i].detalle + "</td>" +
                    "<td>" + filtrado[i].precio + "</td>" +
                          "<td>"+"<input type='text'class='form-control input-sm' id='cant'tabindex='3' placeholder='cant'/>" + "</td>" +
   
          
                     "<td>"+
           " <a  class='btn btn-primary' name='agregar' id='"+filtrado.idproducto+"'>+</a></td>"+
          
                  
                    "</tr>";
                  
                $(newRow).appendTo("#resultadomodal tbody");                 
       }
	
  
}};
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) {
        
      $("#resultadomodal tbody").empty();
        
            for (var i = 0; i < filtrado.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + filtrado[i].codalfa + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].marca + "</td>" +
                    "<td>" + filtrado[i].detalle + "</td>" +
                    "<td>" + filtrado[i].precio + "</td>" +
                    "<td>"+"<input type='text' class='form-control input-sm' id='cant'tabindex='3' placeholder='cant'/>" + "</td>" +
   
          
                     "<td>"+
           " <a  class='btn btn-primary' name='agregar' id='"+filtrado.idproducto+"' >+</a></td>"+
          
                  
                    "</tr>";
                  
                $(newRow).appendTo("#resultadomodal tbody");                 
       }
 
	
  
}};
function listar(){

    tipofiltro="todos";
	 $.ajax({
	  
            type: "POST",
            url: "../gestionweb/includes/php/filtroP.php",
            data: { "tf": tipofiltro}, 
            dataType: "json",
            error: function(){
                alert("error petición ajax");
            },
            success: function(data){
           content=data;
               for (var i = 0; i < data.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + data[i].codalfa + "</td>" +
                    "<td>" + data[i].nombre + "</td>" +
                    "<td>" + data[i].marca + "</td>" +
                    "<td>" + data[i].detalle + "</td>" +
                    "<td>" + data[i].precio + "</td>" +
                         "<td>"+"<input type='text' class='form-control input-sm-2' id='cant' tabindex='3' placeholder='cant'/>" + "</td>" +
   
          
                     "<td>"+
           " <a  class='btn btn-primary' name='agregar' id='"+data.idproducto+"'  >+</a></td>"+
          
                  
                    "</tr>";
                  
                $(newRow).appendTo("#resultadomodal tbody");                 
       
    
               
            }
        
  

        }  
});
}
});

2 respuestas 2

1

Saludos te sugiero en tu javascript agregar el evento onclick mediante el cual llames a una funcion agregarProducto dicha función recibe como parametro tu id algo asi:

  " <a  class='btn btn-primary' name='agregar' onclick='agregarProducto("+data.idproducto+");'  >+</a></td>"+
  .....
 ......
    function agregarProducto(idproducto){
       alert(idproducto);
      ...
       ....
    }//end function agregarProducto

tambien te sugiero verificar que si esta recibiendo el id el evento, digo esto porque tu estas colocando algo asi:

data.idproducto

pero si lo haces mediante el ciclo for deberia ser asi:

data[i]['idproducto']

con todo deberias comprobar como traes el id del producto.

suerte y espero te sirva ..!!

3
  • sI, Como veras los datos y el boton se crean al cargar el modal y funciono lo que me dijiste, y faltaba el subindice.
    – Caruso
    el 29 ene. 2019 a las 11:32
  • Y en cada fila tengo el input de cantidad y luego el agregar, como detecto el input correspondiente a la fila del mas clickaedo?
    – Caruso
    el 29 ene. 2019 a las 11:39
  • Probe con id='"+data[i].idproducto+"' en el input y luego: cantidad=$("input[id="+idproducto+"]").val(); pero la segunda vez que lo agrego toma el idproducto como cantidad, porque sera
    – Caruso
    el 29 ene. 2019 a las 12:13
1

Hay varias formas de crear un evento onclik y dependiendo lo que necesites puedes usar unas u otras.

En tu caso has optado por utilizar el .click(). Esto quiere decir que el elemento al que le añades el evento ya existe antes de que se lea el evento.

Otra posibilidad es utilizar .on('click', function()). Este evento hace referencia a todos los elemento que coincidan con lo que buscas sin importar si se han creado antes o después.

Por lo que la solución es verificar que el evento se crea después de crear el elemento o sino utilizar el siguiente evento:

$("a[name=agregar]").on('click',function(){


  alert('hh');   

});
3
  • no funciona aun, entiendo lo que decis. Ahi cooque el js completo.
    – Caruso
    el 28 ene. 2019 a las 13:29
  • No te da ningún error en consola? el 28 ene. 2019 a las 14:10
  • No me marcaba ningun error,pero quizas porque faltaba el subindice no funcionaba.
    – Caruso
    el 29 ene. 2019 a las 11:33

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.