I have this code to list items inside a 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");
}
}
});
};And as you can see it has an element "a" with the same name and product id, the idea is to add it to the cart, but I can't detect the click. What I did was:
$("a[name=agregar]").click(function(){
alert('hh');
});I select by name, then I would like to get the id of the item which is the id of the product. Full js code:
$(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");
}
}
});
}
});
There are several ways to create an event
onclikand depending on what you need you can use one or the other.In your case you have chosen to use the
.click(). This means that the element to which you add the event already exists before the event is read.Another possibility is to use
.on('click', function()). This event references all items that match what you're looking for regardless of whether they were created before or after.So the solution is to verify that the event is created after creating the element or else use the following event:
Greetings, I suggest you in your javascript add the onclick event through which you call an AddProduct function, said function receives your id as a parameter, something like this:
I also suggest you verify that if the event is receiving the id, I say this because you are placing something like this:
but if you do it through the for loop it should be like this:
However, you should check how you bring the product id.
Good luck and I hope it works for you!