Updating contents of div after clicking on table row - ruby-on-rails

Question

I have datatable and a div, where I want to load information about the order with ajax after clicking on the row of the datatable.
assets/javascript/orders.js:
$(document).ready(function() {
$('#orders').dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
$('#orders tbody tr').each( function() {
this.onclick = function() {
$('#order_info').load(
???
)
};
})
})
orders/list.html.erb:
<table id="orders">
<tbody>
<% #orders.each do |order| %>
<tr data-orderrow=<%= order[:id] %>>
</tr>
<% end %>
</tbody>
</table>
<div id="order_info" style="float: right;">
</div>
If my approach is good, what should I put in the place of ??? in my javascript.

Answer 1

You can make an ajax call to some controller and action that returns json data. Then consume that data, and display the json that comes back.
$(document).ready(function() {
// best to 'cache' the jquery queries you use more than once.
var $orders = $("#orders"),
$orderInfo = $("#orderInfo");
$orders.dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
// it is best not to attach one click even to each 'tr', so instead
// I've added a single click event to the entire table, and then
// determine the closest 'tr' to get the orderId from it.
$orders.click(function(e){
var $target = $(e.target), $order, orderId; // get the element that was clicked
$order = $target.closest("tr");
orderId = $order.attr("data-orderrow");
$.getJSON("/orders/"+orderId+".json",function(orderData){
// do something with orderData, which is an object with the order data
});
});
})
Then in your controller, you could do something like this. You'll need to fill this out in the best way for your application:
class SomeController < ApplicationController
def show
order = Order.find(params[:id])
respond_to do |format|
format.html { render "show" }
format.json { render :json => order }
end
end
end