1

Al abrir un modal muestro una tabla de producto. Primero tiene dos filtros por codigo y por nombre respectivamente. Si hago click en enter estando en codigo o nombre pasa a un input que hay en la tabla donde se inserta la cantidad(hay uno por fila) y luego hay un mas que agrega al ticket.: introducir la descripción de la imagen aquí

Es decir el user filtra y luego se mueve en la tabla, con el tabulador va pasando los input de cantidad, es decir si encontro en la pantalla el producto hace enter y pasa al primer registro, y con Tab sigue hacia abajo. El problema es que quiero con otro enter ejecutar el codigo de Agregarproducto(), es una funcion en el boton mas, pero solo funciona si estoy en el primer registro.:

(document).ready(function() {
    $(".modal").on("shown.bs.modal", function (e) {
   $(this).insertAfter($(".modal-backdrop"));
   setTimeout(function(){ 
     $('#cod').focus(); 
      $('#cod').on('keypress', function(event){

     if (event.keyCode ===13){

           $('#cant').focus();
         }
     });
      }, 500);
     $('#cant').on('keypress', function(event){

     if (event.keyCode ===13){
        var id=$(this).attr("name");

   agregarProducto(id);
         }
     });


  });

$(document).on('click', '#art', function(){

    $('.modal-body').load('content.html',function(){
        $('#myModal').modal('show');

    });

});



$(document).on('keydown', 'body', function(event) {

        if(event.keyCode==113){ //F2
        $('.modal-body').load('content.html',function(){

        $('#myModal').modal({show:true});

    });

         }

       if (event.keyCode==27){
            window.location.href="index.php?controller=ticket&action=index";
               $('#myModal').modal({show:false});

         }
     });

con el codigo de arriba muestro el modal ya sea con F2 o haciendo click en el menu. Luego detecto el click en cod, y como veran llamo a agregar producto.

Pero a su vez dentro de content.html (el modal) llamo a otro script conteniendo lo siguiente:

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



var nombreBusqueda;

 $("#nombre").keyup(function() {
          if (event.keyCode ===13){

           $('#cant').focus();
         }else{


        nombreBusqueda=$("#nombre").val();
        filtrar(nombreBusqueda);
         }
    });
   $("#cod").keyup(function() {

        codBusqueda=$("#cod").val();
        filtrarcod(codBusqueda);
    });



});
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' name='"+filtrado[i].idproducto+"' id='cant' class='form-control input-sm-2' value='1' tabindex='3' placeholder='cant'/>" + "</td>" +


                     "<td>"+
" <a  class='btn btn-primary' onclick='agregarProducto("+filtrado[i].idproducto+");' name='agregar' >+</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' name='"+filtrado[i].idproducto+"' id='cant' class='form-control input-sm-2' value='1' tabindex='3' placeholder='cant'/>" + "</td>" +


                     "<td>"+
          " <a  class='btn btn-primary' onclick='agregarProducto("+filtrado[i].idproducto+");' name='agregar' >+</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' name='"+data[i].idproducto+"' id='cant' class='form-control input-sm-2' value='1' tabindex='3' placeholder='cant'/>" + "</td>" +


                     "<td>"+
           " <a  class='btn btn-primary' onclick='agregarProducto("+data[i].idproducto+");' id='s' name='agregar' >+</a></td>"+


                    "</tr>";

                $(newRow).appendTo("#resultadomodal tbody");                 



            }




        }  
});
}
 function agregarProducto(idproducto){
    var cantidad=0;
    cantidad=$("input[name="+idproducto+"]").val();

    id=idproducto;


         if (cantidad!==""){
    var accion = "agregarxid";

    $.ajax({

            type: "POST",
            url: "../gestionweb/includes/php/procesoDetalle.php",
            data: {"accion":accion,"id":id,"cantidad":cantidad}, 


            error: function(){
                alert("error petición ajax");
            },
            success:function(){
                window.location.href="index.php?controller=ticket&action=index";
            },

        });






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

}  

Osea no se porque si filtro la tabla o me muevo mas abajo no agrega, es como que detecta a cantidad como el primer registro solamnete

8
  • nose... quizas es porque el evento de lanza con con id #cant y es por eso que solo toma el primer elemento, entonces deberias hacer que el evento se lanze por una clase css
    – jjoselon
    Commented el 5 feb. 2019 a las 12:25
  • Claro, en todos los elementos de esa clase, y no existe un each para los inputs?
    – Caruso
    Commented el 5 feb. 2019 a las 12:29
  • Lo que veo en tu código es que tu estás lanzando el evento de keypress a el elemento #cant, lo que significa que solo tomara el primer elemento con el id #cant que encuentre en el html, Entonces si quieres que todos esos campos de cantidad tengan el evento keypress asociado entonces en lugar de ponerle el id #cant pon .cant (como clase css), de esa manera funcionaria
    – jjoselon
    Commented el 5 feb. 2019 a las 12:36
  • si te fijas la clase es "form-control input-sm-2" pero no lo toma, probe con cantidad y tampoco.
    – Caruso
    Commented el 5 feb. 2019 a las 12:47
  • xD, quita el atributo id y al atributo class agregale otra clase, la clase cant, de esta forma quedaria class='form-control input-sm-2 cant'
    – jjoselon
    Commented el 5 feb. 2019 a las 12:49

1 respuesta 1

1

Funciono usando el atributo "class" como dijo jjoselon y luego usando "first" para posicionarme en el primer elemento.

<input type='text' name='"+filtrado[i].idproducto+"' class='cantidad' value='1' tabindex='3' placeholder='cant'/>

Luego hice:

('#cod').on('keypress', function(event){

 if (event.keyCode ===13){

       $('.cantidad:first').focus();
     }
 });$('#nombres').on('keypress', function(event){
    if (event.keyCode ===13){

       $('.cantidad:first').focus();
     } });
  },

   500);
 $(document).on('keypress', '.cantidad', function(event){

 if (event.keyCode ===13){

    var id=$(this).attr("name");

  agregarProducto(id);
     }
 });

Y anda perfecto.

Muchas gracias

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.