railsでAjax通信を行い、通信結果を元ページの指定位置にレンダリングする

色々方法はあるみたいですが、自分が理解しやすかった方法。

1.ViewにAjax通信するアクションと、通信結果を受ける個所を記述

この例だと、「groupsコントローラーのsearch_memberアクション」がAjax通信行うことになります。
この時に「remote: true」を指定することで、search_memberアクションが終了後に探すViewが「.html.erb」ではなく「js.erb」となって、ページ遷移しません。
そして検索結果を記載するところは、「<div id="search_result"></div>」です。
ここがどうなるかは、後程。

2.Controller側の記載

formから飛んできたparamsを元に検索を実施している個所です。

3.通信結果を受け取る「.js.erb」ファイルを作成する
この例ですと、Viewに「search.js.erb」というファイルを作成することになります。
拡張子から分かるように、JavaScriptのファイルになります。

記述は1行。
最初の「$('#search_result')」が、1で記述した「div id="search_result"」に対して動作をすると指定します。
続く「render～」以下は、「search_resultという名前のパーシャルをレンダリングしますよ、@invitation_userを受け渡します」という記述になります。

4.レンダリングされるパーシャルで検索結果を記述
3で「search_result」というパーシャルを指定しているので、Viewに「_search_result.html.erb」というファイルを作ります。
ここに検索結果をどう表示するのかを記載。

3で「@invitation_user」を受け渡されていますので、Viewで使えます。

なんか沢山ファイルが出来ますが、自分が理解しやすかったのはこの方法でした。
3のところでJavaScriptでもって直接書き換えるのもできると思うんですが、自分はJavaScriptの記述に慣れていないので、パーシャル使ってViewの方であれこれする方が分かりやすかったです。
いずれはもうちょっとすっきり記述したいところ。