2011-08-13 6 views
16

私のレールのウェブサイトのインデックスに「Users」リンクを作成して、登録ユーザー(User.all)を表示するようにしようとしていますが、ウェブサイトの右側の部分にdivは最初からページ全体を読み込まずに。link_to and remote => true + jquery:どのように?助けて?

これは古いプロトタイプとremote => true では可能でしたが、Rails 3.1とjQuery(とアセット)ではどのように行うのかわかりません。

チュートリアルの方法を教えてもらえますか?ここで

答えて

46

それはそれは新しいですので、それだけで大したことのように感じ、実際には非常に簡単です。 。基本的には、新しい控えめなJavaScriptのサポートにより、レールは、スクリプトがあなたがするためにJavaScript関数をバインドすることができ、一連のイベントを公開しUJS、彼らは以下のとおりです。

  1. AJAX:beforeSend - sendは
  2. アヤックス発生する前に解雇:成功を - - 成功のイベント
  3. AJAX後に解雇完全:送信が発生した後に解雇、応答
  4. アヤックス含むエラー - 火力エラーが存在している

をあなたがする必要があるすべてはfunctioを書きですn(これは$ document.readyをラップしています)、これらのイベント、または関心のあるイベントのそれぞれにいくつかの匿名関数をバインドします。

例えば、入れたいdivがあるとしますレスポンスデータはidが "response_data"で、IDが "ajax_trigger"のリンクがあります。このような何か:

<%= link_to "My Link", some_model_path(@model_instance), 
         :remote => true, :html => {:id => "ajax_trigger"} %> 
<div id="response_data"> 
</div> 

すべてを行う必要がdiv要素の中に、サーバーからの応答を置くために、以下のような機能を提供している:本当に

$(document).ready(
    function(){ 
      $("a#ajax_trigger").bind("ajax:success", 
        function(evt, data, status, xhr){ 
         //this assumes the action returns an HTML snippet 
         $("div#response_data").html(data); 
      }).bind("ajax:error", function(evt, data, status, xhr){ 
        //do something with the error here 
        $("div#errors p").text(data); 
      }); 
}); 

、あなたがやっているすべてのJavaScriptがサーバーから戻ってきたときに応答を処理しています。 XHRリクエストを開始するために特別な作業を行う必要はありません。このメソッドを.jsファイルに保存して静的なアセットとして扱うこともできます。 Rails 3.1を使用している場合は、コントローラに対応する適切な名前のjavascriptファイルに入れてください。あなたのコントローラでは、responds_with()メソッドでlayout => falseを指定する必要があります。そうすれば、コントローラは完全なページではなくレンダリングする部分またはテンプレートを返します。この設定は、リクエストで指定するデータ型に応じて、JSONだけでなくクライアントによって実行されるjavascriptを返すアクションでも機能します。

私は非常に有用であることが、このブログの記事を見つけました:この回答に http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

+0

正直言って、 "Railsの方法"はとても複雑で、純粋なjQueryのために行くだけです。) –

+0

非常によく説明されています。そして、これは救命救助者です。 –

関連する問題