web-dev-qa-db-ja.com

Rails 4 ajax、jquery、：remote => true、およびrespond_toでパーシャルをレンダリングする

送信されたフォームに応じてAJAXを使用してページを動的にレンダリングすることは一般的です。他の同様の質問は、これを一般的な方法で行う方法に焦点を当てていません。

この件に関して私が見つけた最高のブログ投稿はこちらです： http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-Ruby-on-Rails

質問：Railsアプリケーションをコーディングして、AJAXを使用してフォームを送信するか、リンクをクリックするときに部分ビューをロードできるようにするにはどうすればよいですか？

jqueryruby-on-railsajaxpartials
24
emery

これが機能するためには、トリガー要素の：remote => trueフラグ、コントローラーのクラス定義のrespond_to：jsフラグ、ルート、部分ビュー、最後に動的に実際にレンダリングするjqueryなど、いくつかのものが必要です。 partialは、個別の.html.jsファイルに含まれている必要があります。

以下の例は、「someajax」コントローラーの架空の「render_partial_form」メソッドの例です。


1）：remote => trueフラグをトリガー要素に追加
：AJAX呼び出しをトリガーする要素の.html.erbファイル（ビュー）のリンクまたはフォームタグに：remote => trueフラグを設定します。のような

<%= form_tag("/someajax", method: 'post', :remote => true) do %>

with：remote => true、Railsは自動的にビューを切り替えないため、代わりにJQueryを実行できます。これはform_tag、link_tag、または他のタイプのタグで使用できます。


2）「respond_to：html、：js」をコントローラーの上部に追加

コントローラーのクラス定義の最上部で、コントローラーがhtmlだけでなくjavascriptにも応答できるように指定する必要があります。

class SomeajaxController < ApplicationController
   respond_to :html, :js

   ...

   def render_partial_form
      @array_from_controller = Array.new

      ...

   end
end

この例には、コントローラーからビューに渡される変数があります。@array_from_controllerという名前の選択リストオプションの配列です。


）http動詞をコントローラーのメソッドにルーティングします

POSTされたフォームがAJAX呼び出しをトリガーするようにしたかったので、コントローラーのpost動詞をrender_partial_formビューにルーティングしました。

post 'someajax' => 'someajax#render_partial_form

def render_partial_formで定義されたコントローラーメソッドはビューの名前_render_partial_form.html.erbと一致するため、コントローラーからレンダリングアクションを呼び出す必要はありません。


4）部分ビューの作成
部分ビューは、コントローラーメソッドと同じ名前で、アンダースコアで始まる必要があります：_render_partial_form.html.erb

<h3>Here is the partial form</h3>

<%= form_tag("/next_step", method: 'post') do %>
    <%= label_tag(:data, "Some options: ") %>
    <%= select_tag(:data, options_for_select(@array_from_controller.transpose[0].collect)) %>
    <%= submit_tag('Next') %>
<% end %>


5）JQueryファイルの作成

JQueryステートメントは、フォームのレンダリングをトリガーします。 「render_partial_form」をコントローラーメソッドと部分ビューの実際の名前に置き換えます。 slideDownエフェクトは、オプションの「見た目」です。拡張子が.js.erbで、コントローラーと同じ名前のファイルを作成します。

render_partial_form.js.erb

$('#render_partial_form').html("<%= escape_javascript (render partial: 'render_partial_form') %>");
$('#render_partial_form').slideDown(350);
35
emery

コントローラーアクションを作成するには、「create.js.erb」などのJSビュー（拡張子「js.erb」）を使用する必要があります。それから加えて format.jsからrespond_to do |format| ... endブロック。そして、remote：trueパラメーターをフォームに追加します。注意：js.erbには、次のように含める必要があるJavascriptコードを含める必要があります。

$("tbody#items").append("<%= j render(partial: 'your_partial_path') %>")
12
Felix Borzik

価値があるもの（Rails 2から3へのアプリアップグレードでつまずいたため）：返されたHTMLを追加するイベントハンドラーを追加することでもできます（古いRails 2つのプロトタイプライブラリを使用。

たとえば、これを取得しようとしている場合（runon文の準備）：

form_remote_tag url: {...}, update: ...

応答がHTMLとして受信され、自動的に追加される場合、これを次のように置き換えます。

form_tag {...}, remote: true

次のように、イベントハンドラーをapplication.jsファイルに追加して、同じことを行うだけで、コンテンツを特定の要素に追加します。

$("#myform").on('ajax:success', function(e, data, status, xhr) {
  $("#container").append(data);
)};

それから...あなたは私がやったのと同じ問題に遭遇するかもしれません、それはajax:successイベントを決して起こさないということでした！問題は、応答にJSまたはテキストが必要ですが、HTMLを取得していることです。これを修正する方法は、フォームタグの属性を使用して、応答がHTMLになることを伝えることです。

form_tag {...}, remote: true, data: {type: :html}

ケーキ！

2
mltsy