I have the following markup:
<table>
<tr>
<td>2 <i class="increase_quantity hidden-print icon-plus-sign"></i> <i class="decrease_quantity hidden-print icon-minus-sign"></i></td>
<td class="price_setup">0.0</td>
</tr>
</table>
jQuery
$(document).on('click', '.increase_quantity', function() {
alert('Setup Price: ' + $(this).closest('td').siblings('td.price_setup').text());
return false;
});
The problem is that the result is blank. I was actually trying to parseFloat
but kept getting NaN
so took that out for just now.
Update
The tr
is being appended to the table via an ajax request
// ajax callback
// append result of ajax request
$('#line_items tbody:last').append(data);
Fiddle: http://jsfiddle.net/f49V8/11/ (which works)
Ajax response is valid HTML containing the markup from above.
Edit - Complete Code
I've been through this with a fine tooth comb and honestly can't see anything wrong so going to post the complete relevant code in the hope of someone spotting something.
Rails
class PriceListItemController < ApplicationController
def get_info
if params[:id] != ''
product = PriceListItem.find_by_id(params[:id])
total = product.price_setup + (product.price_rental * product.contract_length)
next_item = params[:no_items].to_i + 1
output = '<tr><td>' + next_item.to_s + '</td><td>' + product.product_type + '</td><td>' + product.description + '</td><td>1 <i class="increase_quantity hidden-print icon-plus-sign"></i></td><td class="price_setup">' + product.price_setup.to_s + '</td><td class="price_rental">' + product.price_rental.to_s + '</td><td class="contract_length">' + product.contract_length.to_s + ' months</td><td class="total">' + total.to_s + '</td></tr>'
render :text => output
end
end
end
HTML
<div class="row-fluid">
<table id="line_items" class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
<th>Setup Cost</th>
<th>Rental Cost</th>
<th>Contract Term</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr id="blank">
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
jQuery
var no_items = 0;
$('#add_product').click(function() {
$.ajax({
url: '/price_list_item/get_info',
data: { id: $('#products_list').val(), no_items: no_items },
dataType: 'html',
type: "GET",
cache: false,
success: function(data) {
no_items++;
// append result of ajax request
$('#line_items tbody:last').append(data);
// remove blank row
$('#blank').remove();
var sub_total = 0;
var vat;
// update totals
$('.total').each(function(i) {
sub_total += parseFloat($(this).text());
});
vat = sub_total * 0.2;
total = vat + sub_total;
$('#sub_total').text('£' + sub_total);
$('#vat').text('£' + vat);
$('#total').text('£' + total);
},
error: function(){
alert('An error occurred, please refresh the page and try again');
}
});
});
$(document).on('click', '.increase_quantity', function() {
var quantity = parseInt($(this).parent().text());
var new_quantity = quantity + 1;
if (new_quantity > 1) {
$(this).closest('td').html(new_quantity + ' <i class="increase_quantity hidden-print icon-plus-sign"></i> <i class="decrease_quantity hidden-print icon-minus-sign"></i>');
// readjust total for this line item
var setup_cost = parseFloat($(this).closest('td').siblings('td.price_setup').text());
var rental_cost = parseFloat($(this).closest('td').siblings('td.price_rental').text());
var contract_length = parseInt($(this).closest('td').siblings('td.contract_length').text());
alert(setup_cost);
var total = setup_cost + (rental_cost * contract_length);
$(this).parent().parent().children('.total').text(total);
// update totals
$('.total').each(function(i) {
sub_total += parseFloat($(this).text());
});
vat = sub_total * 0.2;
total = vat + sub_total;
$('#sub_total').text('£' + sub_total);
$('#vat').text('£' + vat);
$('#total').text('£' + total);
}
return false;
});
<script>
jQuery(document).ready(function()
{
jQuery(".increase_quantity").click(function()
{
alert('Setup Price: ' + $(this).parent('td').siblings('td.price_setup').html());
});
});
</script>
<table>
<tr>
<td>2
<i class="increase_quantity hidden-print icon-plus-sign">12</i>
<i class="decrease_quantity hidden-print icon-minus-sign"></i>12</td>
<td class="price_setup">10.0</td>
</tr>
</table>