Cloning html TR is not cloning all cell values

218
November 23, 2016, at 4:50 PM

I have a html table with a hidden tr. The idea is adding more trs by clicking one buttton.

        <tr class="fila-base hidden">
            <td><input class="form-control input-sm col-xs-1" name="cantidad" id="cantidad" value="0"/></td>
            <td><input type="text" class="form-control input-sm col-xs-2" name="codigoPrincipalProducto" id="codigoPrincipalProducto"/></td>
            <td><input type="text" class="form-control input-sm col-xs-2" name="codigoAuxiliarProducto" id="codigoAuxiliarProducto"/></td>
            <td><input type="text" class="form-control input-sm col-xs-1" name="precioUnitario" id="precioUnitario"/></td>
            <td><input type="number" class="form-control input-sm col-xs-1" name="tDescuento" value="0"/></td>
            <td><input type="number" class="form-control input-sm col-xs-1 " name="precioTotal"/></td>
            <td><input type="number" class="form-control input-sm col-xs-1" name="tIce" id="tIce" value="0"/></td>
            <td class="hidden"><input type="number" class="form-control input-sm col-xs-1" name="tidVP" id="tidVP" value="0"/></td>
            <td id="eliminar-fila"><i class="btn btn-primary btn-xs"><label class="glyphicon glyphicon-trash"></label> Eliminar</i></td>
        </tr>

I have a javascript code that fill all the inputs of this via AJAX. I want to clone the hidden tr after I set the values for each of its inputs.

            $("#adicionar").on('click', function(event){
            var codP = $("#codP").val();
            var codA = $("#codA").val();
            event.preventDefault();
                $.ajax({
                    url : window.location.pathname + "/precioProducto",
                    type : "POST",
                    contentType : 'application/json',
                    mimeType: 'application/json',
                    dataType : 'json',
                    data :  {codP : codP, codA : codA},
                    success : function(response) {
                        $(".fila-base input#precioUnitario").val(response);
                        alert ($(".fila-base input#precioUnitario").val());
                    },
                    error : function(xhr, status, error) {
                        alert("No se encontrĂ³ en precio del producto agregado");
                    }
                });
            $(".fila-base input#codigoPrincipalProducto").val(codP);
            $(".fila-base input#codigoAuxiliarProducto").val(codA);
            $("#tablaVenta tbody tr:eq(0)").clone().removeClass('fila-base hidden').appendTo("#tablaVenta tbody");
        });

The problem is that when I clone the hidden tr all its inputs are cloned except precioUnitario. It means I can see a tr with all values and the input precioUnitario is empty. However, when I click the button $("#adicionar") again, the second tr appears with the value of the first tr I added.

Answer 1

You set the value of #precioUnitario in the $.ajax-callback, so you must also append the cloned <tr> in the ajax-callback when you want to be sure that the value already has been set when you clone the <tr>

The values of the other input's will be cloned, because their values will not be set in the callback

READ ALSO
Replace string or html onload in AJAX using JS and JQuery

Replace string or html onload in AJAX using JS and JQuery

I'm having a problem changing the string content of a particular DIV tag when using AJAX. .

340
Elegant way to change CSS fill property whenever mouseover is triggered?

Elegant way to change CSS fill property whenever mouseover is triggered?

I have several svg polygon elements that each visually is located on top of another svg path element. Sort of like a map divided by cities (path), and each city has an icon (polygon) on it.

233
Ajax - Issue - Sending JavaScript Var to PHP script

Ajax - Issue - Sending JavaScript Var to PHP script

I have not been able to find a simple example of ajax with single variable, everything on here is made way too complicated for an AJAX beginner. I've watched about 4 different YouTube videos on the topic, but can't seem to get it right.

257
Jquery val(); not getting value

Jquery val(); not getting value

I am trying to get the value from an input into a cell of a table and I do not know why the val(); is not working(not getting the value). I have checked everywhere, here, here and here but with little success.

282