JQuery를 사용하는 메시지 스트림 PeriodicUpdater and Rails

Question

jQuery를 사용하여 Rails 3 앱에서 AJAX 메시지 스트림을 만들려고합니다. 앱은 게시물을 표시하고 게시물에 답장합니다. 지금은 업데이트 할 브라우저를 새로 고침 사용자가 필요합니다

//in app/views/posts/_replies.html.erb 
<div class="replies"> 
    <% for reply in @replies %> 
     <div class="reply"> 
      <p><%= reply.body %></p> 
     </div> 
    <% end %> 
</div> 

내가 PeriodicalUpdater의 jQuery를 포트를 사용하려고 해요 (https://github.com/RobertFischer/JQuery-PeriodicalUpdater/)을을 ajaxify하기 끊임없이 업데이트되는 스트림으로 응답합니다. 나는 새로운 해요

// in public/javascripts/application.js 
$(document).ready(function(){ 
$.PeriodicalUpdater('/replies', { 
    method: 'post', 
    data: ???, 
    minTimeout: 1000, 
    maxTimeout: 8000, 
    multiplier: 2, 
    type: 'json', 
    maxCalls: 0, 
    autoStop: 0 
}, function(data) { 
      ???? 
}); 
}); 

을 JS와 jQuery를에 라이언 베이츠 'Railscast (http://railscasts.com/episodes/136-jquery)를 기반으로

, 여기에 내가있어 무엇인가 그래서 현재 게시물을 서버에 전달하는 방법도, 또는 서버에 부분 게시를하는 방법도 자동으로 replies 부분을 렌더링하는 방법은 분명하지 않습니다.

// in app/views/posts/show.js.erb 
$("#replies").append("<%= escape_javascript(render 'replies') %>"); 

// app/controllers/posts_controller.rb 
class PostsController < ApplicationController 
    def replies 
    @replies = Post.find(params[:id]).replies 
    respond_to do |format| 
     format.js 
    end 
    end 
end 

컨트롤러로 현재 post의 ID를 전달하는 몇 가지 방법이 있나요 : 여기에 내 코드의 나머지 부분은? 서버가 새로운 답장을 다시 보낼 수 있도록 어쩌면 마지막 reply의 ID를 전달합니까?

또한 PeriodicalUpdater의 콜백 함수 안에 모든 것을 수동으로 추가해야합니까? 또는 show 부분을 업데이트 할 수있는 방법이 있습니까?

업데이트 : 나는 아래에 제안 된 @Spencer를 사용하여 AJAX 업데이트를 수행하기 위해 푸시하는 버튼을 먼저 변경했습니다.

해당 매개 변수를 전달하는 데 문제가 있습니다. 내 실제 코드는 고유 한 URL 키를 기반으로 물건을 보이는, 그래서 난 그냥이 :

이

<input type="button" value="Refresh" onclick="getReplies('<%= @post.url_key %>');" /> 

그런 다음 내 application.js 파일 : 내 컨트롤러에서

function getReplies(url_key) { 
$.ajax({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    url: "/replies", 
    data: { url_key: url_key }, 
    success: function(msg) { 
     $.each(msg.Replies, function(index, reply) { 
      $("#replies").prepend('<p>' + reply.body + '</p>') 
     }); 
    } 
}); 
} 

, 내가 가진 :

Processing by PostsController#replies as JSON 
Parameters: {"_json"=>"url_key=some-post"} 
←[1m←[35mPost Load (1.0ms)←[0m SELECT `posts`.* FROM `posts` WHERE (`posts`.`url_key` IS NULL) LIMIT 1 

그래서 그것을 :

def replies 
    @post = Post.find_by_url_key(params[:url_key]) 

    respond_to do |format| 
    format.json { render :json => @post.replies } 
    end 
end 

내가 얻을 params에서 매개 변수를 검색하지 않는 것 같습니다.

Answer 1

여기 몇 가지 문제가 있다고 생각합니다. jQuery를 처음 사용한다고 말하면서 문제를 조금이라도 끝내는 것이 좋습니다. 수동 버튼을 사용하여 AJAX를 통해 최신 게시물을 검색하십시오. 일단 당신이 그것을 처리하면 정기적 인 업데이터로 이동하십시오.

사람들이 jQuery에서 사용하는 다양한 템플릿 방법을 살펴 보는 것이 좋습니다. 즉, Ruby가 단순히 JSON 데이터 구조를 반환하도록해야합니다. JSON 데이터 구조를 사용하면 jQuery가 가져 와서 포스트 템플릿에 다양한 데이터를 채울 수 있습니다.

다음은 내 사이트 중 하나에서 사용한 템플릿 방법의 예입니다. 나는 다음 정적 HTML로 시작한다.

<table id="tblExpenses"><tbody> 
     <tr> 
      <th>Date</th> 
      <th>Title</th> 
      <th>Amount</th> 
      <th>Attachments</th> 
      <th colspan="2">&nbsp;</th> 
     </tr> 
     <tr class="expenseTemplate" style="display: none;"> 
      <td class="litDate"></td> 
      <td class="litTitle"></td> 
      <td class="litAmount"></td> 
      <td class="litAttachments">test</td> 
      <td><a class="lnkEdit" href="#">Edit</a></td> 
      <td><a class="lnkDelete" href="#">Delete</a></td> 
     </tr> 
    </tbody></table> 

나는 다음 데이터베이스에 저장 비용에 대한 AJAX 요청을 수행하고 동적으로 비용 테이블에 삽입 할 새 행을 만듭니다.

function showTaxYear(taxYearId) { 
    $.ajax({ 
     type: "GET", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     url: "/Services/GetExpensesByTaxYearId", 
     data: { taxYearId: taxYearId }, 
     success: function(msg) { 
      $.each(msg.Expenses, function(index, expense) { 
       var row = $("#tblExpenses tr.expenseTemplate") 
        .clone() 
        .removeClass("expenseTemplate") 
        .show() 
        .addClass("expense") 
        .addClass("expenseid_" + expense.ID); 
       row.find("td.litDate").text(expense.Date); 
       row.find("td.litTitle").text(expense.Title); 
       row.find("td.litAmount").text(expense.Total); 
       row.find("a.lnkEdit").attr("data-id", expense.ID) 
            .unbind().click(function() { editExpense($(this)); }); 
       row.find("a.lnkDelete").attr("data-id", expense.ID) 
            .unbind().click(function() { deleteExpense($(this)); }); 
       if (expense.Attachment != "") 
        row.find("td.litAttachments").empty().append($("<a>View</a>").attr("href", expense.Attachment)); 
       else 
        row.find("td.litAttachments").empty(); 
       row.insertBefore("#tblExpenses tr.expenseTemplate"); 
      }); 
     } 
    }); 
} 

GetExpensesByTaxYearId은 당신이 이미 후면에서 얻을 어떤 데이터 요소를 만든 경우 실제로 확인할 수 있음을 완료하면이

{"Expenses":[{"ID":9,"Title":"Some expense","Description":"","Date":"02/02/2010","Amount":"$10.00","Tax":0.00,"Attachment":"","Total":"$10.00"}]} 

처럼 보이는 JSON 결과를 반환 Ruby에서 jQuery 검색을 수행합니다. 예를 들어, 어떤 요소가 클래스 expenseid_<Identifier>과 함께 있는지 확인할 수 있습니다. 만약 그렇다면, 나는 이미 그 비용을 냈습니다.

나는 이것이 씹을 것이 많지만 AJAX 콘텐츠를 스트리밍하는 것은 많은 것을 알고 있습니다. 내가 더 명확히 할 수 있는지 알려줘.