Search code examples
ajaxjqueryruby-on-rails-2

Can't get sibling element text with jQuery


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;
    });

Solution

  • <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>