Steven Kinnear
Steven Kinnear

Reputation: 412

Adding Up dynamic data in a table not working jquery

I bring my data back from my database in json format. as you can see i add them to the table. On each pass i pass the newly created table row to the calculate sum which works as all the details are alerted there. Problem is the total is not updating even though in the sum it can be echo'ed.

function calculateRow(list) {
    var cost = 0;
    var $row = $(list).closest("tr");
    var weeks = parseFloat($row.find('.weeks').val());
    var quantity = parseFloat($row.find('.quantity').val());
    var price = parseFloat($row.find('.price').val());
    var mark = parseFloat($row.find('.mark').val());
    var ptype = $row.find('.ptype').val();
//alerts me of numbers here
alert('-'+weeks +'-'+quantity+'-'+price+'-'+mark+'-'+ptype);
        var mcond = weeks * quantity * price;
        $row.find('.total').val(mcond.toFixed(2));
        $row.find('.total-prod').val(mcond.toFixed(2));
//alerts me of total 
        alert(mcond);
}

Now my script for the new rows

function editquote(){
        var list = "";
        $.getJSON('responder.php?method=edit-quote',function(data){
        $.each(data.products,function(index,item){
            list += '<tr class="copyIng"><td class="title"><select size="1" class="equip" name="item[]"  data-mini="true"><option value="'+item.pid+'">'+item.pname+'</option></select></td>'+
            '<td class="smallrow"><center><input type="text"  style="text-align: center;" class="weeks" name="weeks[]" value="'+item.pw+'" /></center><input type="hidden"  class="mark" name="mark[]" value="'+item.pmu+'" /><input type="hidden" class="ptype" name="ptype[]" value="'+item.pt+'" /></td>'+
            '<td class="smallrow"><center><input type="text" style="text-align: center;" class ="quantity" name="quantity[]" value="'+item.pq+'" /></center></td>'+
            '<td class="smallrow"><center><input type="text" style="text-align: center;" class ="price" name="price[]"  class="price" value="'+item.pc+'" /></center></td>'+
            '<td class="smallrow" style="background: rgba(0,0,0,0.1);"><center>'+
            '<input type="text" style="text-align: center;" class="total" name="total" value="0.00"  readonly="true" />'+
            '<input type="hidden" name="dm1" class="total-prod" value="0.00" />'+
            '<input type="hidden" name="dm2" class="total-trans" value="0.00" />'+
            '<input type="hidden" name="dm3" class="total-lab" value="0.00" />'+
            '</center></td>'+
            '<td class="smallrow"><center><a class="remove"><img src="red.png" alt="Smiley face" height="20" width="20"></a></center></td></tr>';
            $("#equipTable tr.grandtotal").before(list);
            $(".copyIng").trigger("create");
            calculateRow(list);
            $( "#equipTable" ).table( "refresh" );
            list ='';
        });
        });
    }

Upvotes: 1

Views: 55

Answers (1)

winhowes
winhowes

Reputation: 8065

Try changing this:

var $row = $(list).closest("tr");

To this:

var $row = $(list).siblings("tr").last();

as .closest() traverses up the DOM, but in your case you want breadth rather than depth. I included the .last() method because I'm assuming you want to update the last row, the last <tr>. If that is not the case, let me know and I can adjust my answer accordingly.

EDIT

Change to editquote() this (I just added 1 line):

function editquote(){
        var list = "";
        $.getJSON('responder.php?method=edit-quote',function(data){
        $.each(data.products,function(index,item){
            list += '<tr class="copyIng"><td class="title"><select size="1" class="equip" name="item[]"  data-mini="true"><option value="'+item.pid+'">'+item.pname+'</option></select></td>'+
            '<td class="smallrow"><center><input type="text"  style="text-align: center;" class="weeks" name="weeks[]" value="'+item.pw+'" /></center><input type="hidden"  class="mark" name="mark[]" value="'+item.pmu+'" /><input type="hidden" class="ptype" name="ptype[]" value="'+item.pt+'" /></td>'+
            '<td class="smallrow"><center><input type="text" style="text-align: center;" class ="quantity" name="quantity[]" value="'+item.pq+'" /></center></td>'+
            '<td class="smallrow"><center><input type="text" style="text-align: center;" class ="price" name="price[]"  class="price" value="'+item.pc+'" /></center></td>'+
            '<td class="smallrow" style="background: rgba(0,0,0,0.1);"><center>'+
            '<input type="text" style="text-align: center;" class="total" name="total" value="0.00"  readonly="true" />'+
            '<input type="hidden" name="dm1" class="total-prod" value="0.00" />'+
            '<input type="hidden" name="dm2" class="total-trans" value="0.00" />'+
            '<input type="hidden" name="dm3" class="total-lab" value="0.00" />'+
            '</center></td>'+
            '<td class="smallrow"><center><a class="remove"><img src="red.png" alt="Smiley face" height="20" width="20"></a></center></td></tr>';
            //NEW LINE
            list = $(list);
            $("#equipTable tr.grandtotal").before(list);
            $(".copyIng").trigger("create");
            calculateRow(list);
            $( "#equipTable" ).table( "refresh" );
            list ='';
        });
        });
    }

And then change var $row to this:

var $row = list;

The issue was that list was a string, so when you passed it into calculateRow(), $row became a new element, rather than a reference to the element inserted into the DOM.

Upvotes: 1

Related Questions