Rails 3 AJAX solution for updating tables?

Question

I know this is a popular topic, but I've been searching quite a bit trying to find the answer and strangely haven't found anything that has been able to help...

I've got a basic Rails 3 application displaying database entries in a table. A separate application posts new entries into the database, and I'd like the Rails app to poll and refresh to display the new content. Right now, I have a terrible piece of javascript simply reloading the whole page and its proving to be my roadblock. I have a search bar and check bars to remove multiple items, but these are both reset upon a page refresh (again, I know this is awful and horrendously broken).

From what I have read, I gather that I should use AJAX to poll the database and simply render database entries that are newer than the newest entry displayed. How to precisely execute this is another story...

Most of the tutorials I have found have been out of date, and I've been unable to get the legacy code running. I am new to both AJAX and Rails, and I would love if anyone has any guidance, advice, tutorials, or personal criticism (:P) that may point me in the right direction.

Thanks!

EDIT: I've got new entries being pulled into the page, but they aren't rendering correctly at all. For some reason, they aren't being added as entries into my table. Here's my code, hopefully you guys might be able to pick something out I missed: * Note -> requests are actually the name of my database entries. Requests is the model.

views/requests/index.html.erb

    <table class="center">
<div id="requests">
 <tr>
    <th><%= sortable "Patient_Name", "Patient Name" %></th>
    <th><%= sortable "Room_Number", "Room Number" %></th>
    <th><%= sortable "Request" %></th>
    <th><%= sortable "Urgency" %></th>
    <th><%= sortable "count", "Request Count" %></th>
    <th><%= sortable "created_at", "Created At" %></th>
    <th></th>
  </tr>
<%= render @requests %>
</div>
</table>

Request Partial: views/requests/_request.html.erb

 <div class="request" data-time="<%= request.created_at.to_i %>">
    <tr>
        <td><%= request.Patient_Name %></td>
        <td><%= request.Room_Number %></td>
        <td><%= request.Request %></td>
        <td><%= request.Urgency %></td>
        <td><%= request.count %></td>
        <td><%= request.created_at.getlocal.strftime("%r on %D") %></td>
        <td><%= link_to 'Remove', request, :confirm => 'Are you sure?', :method => :delete %></td>
    </tr>
</div>

views/requests/index.js.erb

$('#requests').append("<%=raw escape_javascript(render(@requests))%>");

Answer 1

How is this?

http://www.datatables.net/

another whole set are here:

http://plugins.jquery.com/plugin-tags/ajax-table

Sometimes it's better to use what's there than to build new.

But to answer your question, it depends on whether you are manipulating the DOM yourself or letting Prototype, jQuery, MooTools, or whatever do the heavy lifting. The idea is to set a timer in your Javascript and when the timer fires, ask the server for updates. The server -- your Rails app -- will package up whatever has changed and send it back.

Step 1: Decide on a framework. I use jQuery but most will do.

Step 2: Decide on a data format. I use JSON, but XML will do.

Step 3: Set up the timer loop. It involves using settimer() and resetting it after each observation.

Step 4: In the handler that executes when the timer fires, package up a "last seen" timestamp and make the Ajax request. How you do it varies from framework to framework -- or if you are coding right to the DOM, from browser to browser.

Step 5: Set up a "success" handler so that when your server returns zero or more rows of data, you can insert these TR-TD-/TD-/TR rows in your table.

Step 6: Update any internal junk like number or row counters or whatever else your Javascript is tracking.

Note: You may find there are plugins other people have written that will work great and save you the trouble, but you should have a basic understanding of how this is done.