Rails 3 AJAX solution for updating tables?

Question

I know this is a popular topic, but I searched quite a bit, trying to find the answer and strangely did not find anything that could help ...

I have a basic Rails 3 application that displays database records in a table. A separate application sends new records to the database, and I would like the Rails application to poll and update to display the new content. Right now I have a terrible part of javascript that just reloads the whole page and proves that this is my road block. I have a search bar and control panels to delete a few items, but they both reset when the page was refreshed (again, I know this is horribly and terribly broken).

From what I read, I understand that I have to use AJAX to query the database and simply render the database records that are newer than the newest record displayed. How to accurately complete this is another story ...

Most of the tutorials that I found are out of date, and I was unable to run the legacy code. I'm new to AJAX and Rails, and I would like someone to have any recommendations, tips, tutorials, or personal criticism (: P) that might point me in the right direction.

Thanks!

EDIT: I have new posts that are being pulled onto the page, but they are not showing correctly. For some reason, they are not added as records to my table. Here is my code, I hope you guys could choose something that I missed: * Note → the queries are actually the names of my records in the database. Queries are a model.

opinions / queries / 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> 

opinions / queries / index.js.erb

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

Answer 1

Like this?

http://www.datatables.net/

here is another one-piece set:

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

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

But to answer your question, it depends on whether you control the DOM itself or enable Prototype, jQuery, MooTools or something in this regard. The idea is to set a timer in your Javascript, and when the timer fires, contact your server for updates. The server — your Rails application — will pack everything that has been modified and sent back.

Step 1: Define the structure. I use jQuery, but most will do.

Step 2: Define the data format. I use JSON, but XML will do.

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

Step 4: In the handler that executes when the timer starts, pack the timestamp “last time” and execute the Ajax request. How you do it, from the framework to the framework - or if you code the DOM correctly, from browser to browser.

Step 5. Configure the "success" handler so that when your server returns zero or more data, you can insert these TR-TD- / TD- / TR lines into your table.

Step 6: Update any internal junk files, such as numeric or line counts, or anything else that is tracking your Javascript.

Note. You may find plugins written by other people that will work just fine and save you trouble, but you should have a basic understanding of how this is done.

Answer 2

First create a rail endpoint that can receive new entries:

 # config/routes.rb match '/records/new_since/:time', :to => 'records#new_since' # app/controllers/records_controller.rb class RecordsController < ApplicationController def new_since @records = Record.where('created_at > ?', Time.parse(params[:time])) respond_to do |format| format.json do @records[:time] = Time.now.to_s(:db) render :json => @records.to_json end end end end 

Then, a little client-side javascript (prototype here):

 setInterval( function(){ new Ajax.Request('/records/new_since/' + $('time') + '.json', { method: 'get', onSuccess: function(transport){ var records = transport.response.responseJSON; // insert the last checked time into <div id='time'></div> $('time').innerHTML = records.time; // loop over response JSON and do what you want with the data records.each(function(record){ $$('table#records').insert({ bottom: '<tr><td>'+record.attribute+'</td></tr>'; }); }); } }); }, 30000 ); 

Alternatively, instead of sending json, you can display the pattern of all new rows in the table and just throw it away. Less flexible, but a little easier if you just want to drop the answers below:

 def new_since @records = Record.where('created_at > ?', Time.parse(params[:time])) respond_to do |format| format.json {} # renders json template end end # app/views/records/new_since.html.json.erb <% records.each do |record| %> <tr><td><%= record.attribute %></td></tr> <% end %> setInterval( function(){ new Ajax.Request('/records/new_since/' + $('time') + '.json', { method: 'get', onSuccess: function(transport){ var record_rowss = transport.response.responseText; $('time').innerHTML = records.time; $$('table#records').insert({bottom: record_rows}); } }); }, 30000 );