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> 

私はajaxifyするPeriodicalUpdater（https://github.com/RobertFischer/JQuery-PeriodicalUpdater/）のjQueryのポートを使用しようとしています常に更新されるストリームとして応答します。 、私はJSとjQueryに新たなんだ

// 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) { 
      ???? 
}); 
}); 

を：ライアン・ベイツ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>') 
     }); 
    } 
}); 
} 

、私が持っている：

を

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

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

私が手：

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 

だから、パラメータがparamsから取得されていないようです。

Answer 1

私はここにいくつかの問題があると思います。 jQueryの初心者だと言って以来、この問題を少しでも解決することをお勧めします。手動ボタンを使用して、AJAXを介して最新の投稿を取得してください。それを処理したら、定期的なアップデータに進みます。

私がお勧めするもう1つは、人々がjQueryで使用するさまざまなテンプレートメソッドを調べることです。つまり、RubyにJSONデータ構造を返して、jQueryに取り込んでポストテンプレートにさまざまなデータを取り込ませる必要があるはずです。

私のサイトの1つで使用したテンプレート方法の例です。私は次の静的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リクエストを実行し、動的に費用のテーブルに挿入する新しい行を作成します。GetExpensesByTaxYearIdはあなたが実際にあなたはすでにあなたが戻ってから得るものは何でもデータのための要素を作成したかどうかを確認することができやったらこの

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

のように見えるJSONの結果を返します

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

RubyのjQuery検索を実行します。私の例では、要素がクラスexpenseid_<Identifier>で存在するかどうかを調べることができます。もしそうなら、私はすでにその費用を出しました。

これはおそらく多くのことですが、AJAXコンテンツのストリーミングには多大な影響があります。私がさらに明確にすることができたら教えてください。