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 / запросы / _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 самостоятельно или позволяете Prototype, jQuery, MooTools или что-то еще делать тяжелую работу. Идея состоит в том, чтобы установить таймер в вашем Javascript, и когда таймер сработает, спросите сервер об обновлениях. Сервер - ваше приложение Rails - упакует все, что изменилось, и отправит его обратно.

Шаг 1: Определите рамки. Я использую jQuery, но большинство подойдет.

Шаг 2: Выберите формат данных. Я использую JSON, но XML подойдет.

Шаг 3: Настройте цикл таймера. Он включает использование settimer () и сброс его после каждого наблюдения.

Шаг 4. В обработчике, который запускается при срабатывании таймера, упакуйте отметку времени «последнего просмотра» и выполните запрос Ajax. То, как вы это делаете, варьируется от фреймворка к фреймворку - или если вы программируете прямо в DOM, из браузера в браузер.

Шаг 5. Установите обработчик «success», чтобы, когда ваш сервер возвращал ноль или более строк данных, вы могли вставить эти строки TR-TD- / TD- / TR в вашу таблицу.

Шаг 6: Обновите любой внутренний мусор, такой как счетчики чисел или строк или все, что отслеживает ваш Javascript.

Примечание: вы можете обнаружить, что есть плагины, написанные другими людьми, которые будут отлично работать и избавят вас от проблем, но вы должны иметь общее представление о том, как это делается.

Answer 2

Сначала создайте конечную точку рельсов, которая может получать новые записи:

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