Dynamic display using JQuery in Rails 3

Question

I'm loading a collection of @products that has continuously changing attributes that I calculate on the fly. I don't want to perform all calculations for all @products on the initial page index. Instead, I only want to perform and display the calculations upon hovering over an image.

I first create the jQuery calls to display a popup box to contain the calculations for each product in products/index.html.erb like this:

The products/index.html.erb

<script type="text/javascript">
  jQuery(function($){
    <% @products.each do |product| %>
      $('#calc_<%= product.id %>').hover(function() {
        $('#pid_<%= product.id %>').show() 
      }, function() {
        $('#pid_<%= product.id %>').hide()
      });
   <% end %>
});
</script>

<table class='list'>
  <%= render :partial => "products/product", :collection => @products %>
</table>

My _product.html.erb:

<%= image_tag('/images/info.png', :id => "calc_#{product.id}") %>
<div class='pid_display' id='pid_<%=product.id %>'></div>    

My css:

.pid_display {
    height: 80px; 
    width: 200px; 
    background-color: #eee; 
    display: none; 
    padding-top: 8px;
    position: absolute;
}

I'm trying to call the page which performs the calculations on the product.id like this (although I have no idea if this is proper):

 jQuery.ajax("products/calculations/<%= product.id %>");

When I attempt to combine the call to the calculations page so it displays the results in the popup box, both fire. In other words, a popup box appears and the logs show that the calculations are executed from the products_controller.

How can I combine these two calls to display the result of the calculations inside the popup box?

Answer 1

Thanks to my friend, Marcus, for pointing me here, http://tech.thereq.com/post/16479390885/loading-page-content-via-ajax-in-rails-3-1. Using the "load" method:

jQuery(function($){
  <% @products.each do |product| %>
    $('#calc_<%= product.id %>').hover(function() {
      $('#pid_<%= product.id %>').show().load('products/calculations/<%= product.id %>');
    }, function() {
      $('#pid_<%= product.id %>').hide()
    });
  <% end %>
});