web-dev-qa-db-ja.com

link_to and remote => true + jquery：どうやって？助けて？

私のRails Webサイトのインデックスに「ユーザー」リンクを作成して、登録ユーザー（User.all）を表示しようとしていますが、Webサイトの右側に表示したいのですが、部分的に、最初からページ全体をロードせずにdivで。

私はこれが古いプロトタイプとリモート=> trueで可能であることを知っていましたが、Rails 3.1とjQuery（およびアセット）ではそれを行う方法がわかりません。

誰かがチュートリアルへの道を手伝ったり教えてくれますか？

jqueryruby-on-railsruby-on-rails-3partial
17
Filippos

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

  1. ajax：beforeSend-送信が発生する前に発生します
  2. ajax：success-送信が発生した後に発生し、応答が含まれます
  3. ajax：complete-成功イベントの後に発生します
  4. ajax：error-エラーが存在する場合に発生します

あなたがする必要があるのは、これらの各イベント、またはあなたが興味のあるイベントだけにいくつかの無名関数を順番にバインドする関数（$ document.readyでラップする）を書くことです。

たとえば、IDが「response_data」の応答データを入れたいdivがあり、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ファイルに配置する必要があります。コントローラーでは、：layout => falseを指定する必要があります。これにより、コントローラーは、完全なページではなく、レンダリングする部分またはテンプレートを返すだけです。このセットアップは、データに応じて、JSONだけでなくクライアントによって実行されるJavaScriptを返すアクションでも機能します。リクエストで指定したタイプ。

このブログ投稿は非常に役に立ちました： http://www.alfajango.com/blog/Rails-3-remote-links-and-forms/

47
Robert C Whitener III

役立つリソースのリストは次のとおりです。

9
lbz