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.:
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
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 funcionariaid
y al atributoclass
agregale otra clase, la clasecant
, de esta forma quedariaclass='form-control input-sm-2 cant'