Why do not I apply Editable to my table?

Question

Why do not I apply Editable to my table?

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

The problem I have is that I have a table in HTML in the following way

<!-- TABLA DETALLES PRODUCTOS -->
<div class="col-md-12">
<table id="TableProducts" class="table table-bordered table-responsive">
<thead>
<tr class="active">
<td><strong>ID Producto</strong></td>
<td><strong>Nombre Producto</strong></td>
<td><strong>Caracteristicas</strong></td>
<td><strong>Muestras</strong></td>
<td><strong>Cantidad</strong></td>
<td><strong>Precio</strong></td>
<td><strong>Descuento</strong></td>
<td><strong>IVA</strong></td>
<td><strong>Retención IVA</strong></td>
<td><strong>Total</strong></td>
<td><strong></strong></td>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
<!-- FIN TABLA DETALLES PRODUCTOS -->

I add a row within the div, as follows with jquery

var fila = "<td>" + $.trim(idProduct) + "</td>";
fila += "<tr><td>" + $.trim(response.d.nombreProducto) + "</td>";
fila += '<td onclick="OpenModal(\'' + $.trim(idProduct) + '\', \'' + precio + '\');">XXXX XXXX XXXX XXXX</td>';
fila += "<td><center><input type='radio'></center></td>";
fila += "<td><a id='tableccant'>1</a></td>";
fila += "<td><a id='tablecprice'>0</a></td>";
fila += "<td><a id='tablecdescc'>0</a></td>";
fila += "<td>IVA</td>";
fila += "<td>RIVA</td>";
fila += "<td>TOTAL</td>";
fila += "<td><a class='text-danger delete'><span class='glyphicon glyphicon-remove'></span></a></td></tr>";
var ElementoHTML = $(fila);
$('#TableProducts').append(ElementoHTML);

After that I have a line where I call a method where I apply the editable de bootstrap plugin as follows

//Se puede editar la tabla de dos maneras gracias al plugin
//La primera es por medio de popo up y la otra es por inline

$.fn.editable.defaults.mode = "inline";

// Sección productos
$("#tableccant").editable();
$("#tablecprice").editable();
$("#tablecdescc").editable();

My problem is that when I add the first row, it works wonderfully, but when I add more rows I do not apply the plugin , someone knows what the problem might be

jquery html asp.net

asked by Miguel 18.07.2017 в 00:15

source

2 answers

1

When you generate this html:

fila += "<td><a id='tableccant'>1</a></td>";
fila += "<td><a id='tablecprice'>0</a></td>";
fila += "<td><a id='tablecdescc'>0</a></td>";

You are adding multiple elements with the same id="tableccant" . So when you search in the element for the id, always return the first element with that id.

See an example:

$("#id-1").css("background", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id-1">Div 1</div>
<div id="id-1">Div 2</div>

You must find a way to generate the id dynamically, get that id and apply the style you want.

You can also change the id for a class and do the following:

fila += "<td><a class='tableccant'>1</a></td>";

Javascript:

$(".tableccant").editable();

answered by 18.07.2017 в 00:26

How can I export a function from one component to another? ANGULAR 2/4 Find the person who is younger

score 1 · Accepted Answer

The problem is in the id since these should be Unique throughout the DOM, otherwise, Javascript only takes the first one.

Now if you want it to work on all the elements use classes, so that your code would look like this:

var fila = "<td>" + $.trim(idProduct) + "</td>";
fila += "<tr><td>" + $.trim(response.d.nombreProducto) + "</td>";
fila += '<td onclick="OpenModal(\'' + $.trim(idProduct) + '\', \'' + precio + '\');">XXXX XXXX XXXX XXXX</td>';
fila += "<td><center><input type='radio'></center></td>";
fila += "<td><a class='tableccant'>1</a></td>";
fila += "<td><a class='tablecprice'>0</a></td>";
fila += "<td><a class='tablecdescc'>0</a></td>";
fila += "<td>IVA</td>";
fila += "<td>RIVA</td>";
fila += "<td>TOTAL</td>";
fila += "<td><a class='text-danger delete'><span class='glyphicon glyphicon-remove'></span></a></td></tr>";
var ElementoHTML = $(fila);
$('#TableProducts').append(ElementoHTML);

and in javascript you would leave the following:

$(".tableccant").editable();
$(".tablecprice").editable();
$(".tablecdescc").editable();

But a problem may arise due to your dynamic content so I would leave it this way:

$("table").find(".tableccant").editable();
$("table").find(".tablecprice").editable();
$("table").find(".tablecdescc").editable();