Rails 3用于更新表的AJAX解决方案？

Question

我知道这是一个热门话题,但我一直在寻找相当多的尝试找到答案,奇怪的是没有找到任何能够帮助的东西......

我有一个基本的Rails 3应用程序在表中显示数据库条目.一个单独的应用程序将新条目发布到数据库中,我希望Rails应用程序可以轮询和刷新以显示新内容.现在,我有一个可怕的javascript只是重新加载整个页面,它证明是我的障碍.我有一个搜索栏和检查栏删除多个项目,但这些都是在页面刷新时重置(再次,我知道这是可怕的,可怕的破坏).

根据我的阅读,我收集说我应该使用AJAX来轮询数据库,并简单地呈现比最新显示的条目更新的数据库条目.如何精确执行这是另一个故事......

我发现的大多数教程已经过时了,而且我一直无法运行遗留代码.我是AJAX和Rails的新手,我很乐意,如果有人有任何指导,建议,教程或个人批评(:P),可能会指出我正确的方向.

谢谢!

编辑:我有新的条目被拉入页面,但它们根本没有正确渲染.出于某种原因,它们不会作为条目添加到我的表中.这是我的代码,希望你们可能能够选择我错过的东西:*注意 - >请求实际上是我的数据库条目的名称.请求是模型.

意见/请求/ 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>

请求部分: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>

意见/请求/ index.js.erb的

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

Answer 1

这怎么样？

http://www.datatables.net/

另一整套在这里:

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

有时最好使用那里的东西而不是建立新的东西.

但是,为了回答你的问题,这取决于你是否自己操纵DOM或者让原型,jQuery的,MooTools的,或任何做繁重.我们的想法是在您的Javascript中设置一个计时器,当计时器触发时,请询问服务器是否有更新.服务器 - 您的Rails应用程序 - 将打包已更改的内容并将其发回.

第1步:确定框架.我使用jQuery但大多数人会这样做.

第2步:确定数据格式.我使用JSON,但XML会这样做.

第3步:设置定时器循环.它涉及使用settimer()并在每次观察后重置它.

步骤4:在计时器触发时执行的处理程序中,打包"最后看到的"时间戳并发出Ajax请求.如何做到这一点因框架而异 - 或者如果您正在编写DOM,从浏览器到浏览器.

步骤5:设置"成功"处理程序,以便当服务器返回零行或多行数据时,可以在表中插入这些TR-TD-/TD-/TR行.

第6步:更新任何内部垃圾,如数字或行计数器或Javascript跟踪的任何其他内容.

注意:您可能会发现其他人编写的插件可以很好地工作并为您省去麻烦,但您应该对如何完成此操作有基本的了解.

Answer 2

首先创建一个可以获取新条目的rails端点:

# 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

然后,在客户端一点javascript(原型在这里):

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

或者,您可以渲染所有新表行的模板,而不是向下发送json,而只是将其抛出.如果你只想在底部抛出响应,那么灵活性会降低,但会更简单一些:

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