Reputation: 412
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
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