rubyのajaxで結果を部分テンプレートに渡して表示したい

Question

前提・実現したいこと

rubyのajax通信において、ボタンをクリックしたらその結果に合わせた結果を返したい

発生している問題・エラーメッセージ

結果を取得まではできるのですが、それを部分テンプレートに入れると下記のようなエラーになる

undefined local variable or method `data' for 

console.log(data)
としたところ、

0: {id: 1, customer_id: 1, content_id: 1, …}
1: {id: 2, customer_id: 2, content_id: 2, …}
length: 2
__proto__: Array(0)

該当のソースコード

Controller

def change
	inquiries = Inquiry.all
	if(params[:id] == '1')
		@inquiries = inquiries.order(visit_date: 'ASC')
	else
		@inquiries = inquiries.order(created_at: 'ASC')
	end
	render json: @inquiries
end

$(function(){
	$('.visit_date').click(function() {
		change_inquiries(1);
	});
	$('.created').click(function() {
		change_inquiries(2);
	});

	function change_inquiries(val) {
		$.ajax({
			type: 'GET',
			url: '/top/change',
			data: {
				id: val
			},
			dataType: 'json'
		})
		.done(function (data) {
			$(".highlight").html("<%= j(render :partial => 'inquiries/result', :locals => {:data => data}) %>")
		})
	}
});

補足情報（FW/ツールのバージョンなど）

rails 5.2.3
ruby 2.6.3

Answer 1

javascript はクライアント側（ユーザーのブラウザ）で実行するもので partial はサーバー側で描画するものなので、javascriptから直接partialを使うことはできません

値ではなく partial 結果を返す方法

お手軽ですが値だけのときより通信量が増えることになります

def change
  inquiries = Inquiry.all
  if(params[:id] == '1')
    @inquiries = inquiries.order(visit_date: 'ASC')
  else
    @inquiries = inquiries.order(created_at: 'ASC')
  end
end

change.json.jbuilder

json.html "#{j(render :partial => 'inquiries/result', :locals => {:data => @inquiries})}"

$(".highlight").html(data.html)

pug（旧jade）等のJST（JavaScript Templates）を使う方法

partial的なものをjavascriptでやる仕組みです、データに応じて描画内容をjavascriptで組み立てます
導入が必要ですがクライアント側で描画するので通信量は減ります

$(".highlight").html(inquiriesResultTemplate(data))

※）導入方法は環境次第なので省略

Comments

[退会済みユーザー]

回答ありがとうございます。
javascriptから直接partialを使うような記事を見かけたので、質問をしました。できるなら実装したかったのですが、通信料が増えるということなので今回はあきらめようと思います。

[Ighrs]

採用は描画内容や運用次第だと思います

例えば html の記述は最低限で、cssでデザインしているなら大した通信量ではないと思いますし、Bootstrap等でhtmlゴリゴリ記述して描画していると増えますね

また多少増えても所詮文字だから動画等に比べたら最近の通信環境では気にする必要がない等とか、頻繁に見る画面ではないから多少通信文字が増えても問題ない等の考え方もあります

> javascriptから直接partial

その記事が不明なのでなんとも言えないですが、前者の案は通信経由なもののjavascriptからpartialを実行させていると言えなくもないですね...

[退会済みユーザー]

> 通信量に関して
動画は入れていませんが、Bootstrapは使っており、頻繁にアクセスする画面なので、別の方法を考えようかと思います。

> javascriptから直接partial
下記の記事を参考に実装を行い、今回の質問をさせていただきました。
https://www.c-and-d.org/rails_ajax/

[Ighrs]

やはり少し（差し替え部分の）記述方法が異なりますが前者の案と同じですね

その記事： parital 内容と差し替える js コードを通信して、 jsで実行する
前者の案： partial 内容を通信して、jsで差し替える

> Bootstrapは使っており、頻繁にアクセスする画面なので別の方法を考えようかと思います。

そのような条件のもとで判断されたのなら問題ありません