解決したいこと
下記の処理を作成したいです。
- ボタンを押下のような動作をトリガーとして、javascriptの変数をcontrollerに渡す
- controllerは受け取った変数で何らかの処理を行い、処理結果をviewに渡し画面表示する
1.の処理のうち「javascriptの変数をcontrollerに渡す」をどのように実現するかが分からなく、方法やコードをご教示いただけないでしょうか。
環境
- Ruby 2.6.3
- Rails 6.0.3
何卒よろしくお願いいたします。
やり方は色々ありますが
hidden_field を用意しておいてボタンが押された瞬間そのフィールドに値を埋めてあとは form submit に任せるとか
ボタン押されたトリガー時に http リクエストを自分で作ってしまうとか
ただ Rails の流儀でやるなら
https://railsguides.jp/working_with_javascript_in_rails.html#data-url%E3%81%A8data-params
こちらの data-params を使うのがきれいかつ楽なんじゃないかと思います
view.html.erb
<%= button_to 'ラベル', 'data-url': xxx_path, id: 'yyy' %>
別に link_to でも form + submit でもできます
application.js
$('#yyy').on('click', () => {
$('#yyy').attr('data-params',
'aaa=' + 'javascript で作った好きな値' +
'&bbb' + 'javascript で作った好きな値');
}
なれてるので jquery が入ってる前提でかいてますが
native javascript でも同じことができるメソッドはあります
jquery には data-xxx 属性をセットする
$('#yyy').data('params', 'ccc=' + '好きな値');
ってのも用意されてるんですが昔なぜかこれだと動かなかった覚えがあるかも
xxx_controller.rb
def xxx
aaa = params.require('aaa')
pp aaa
ちな渡すときはどんなデータも必ず文字列になるので rails 側で適宜型キャストしてください
動作確認したわけではないので細かいところは間違ってたらすみません
- ボタンを押下のような動作をトリガーとして、javascriptの変数をcontrollerに渡す
- controllerは受け取った変数で何らかの処理を行い、処理結果をviewに渡し画面表示する
1.の処理のうち「javascriptの変数をcontrollerに渡す」をどのように実現するかが分からなく、方法やコードをご教示いただけないでしょうか。
普通に考えて、ブラウザから JavaScript を使って Web サーバーにデータを渡すには、Web サーバー側にデータの受け口を作って、ブラウザからは XMLHttpRequest とか jQuery Ajax とか fetch API を使ってその受け口にデータを送信することになります。
例えば Restful な Web API に fetch API を使って要求をかけ、応答として返される JSON 文字列をブラウザに表示する例は以下のようになります。
<h1>ApiCors</h1>
<input type="button" value="READ ALL" onclick="apiHeroesGet();" />
<input type="button" value="READ 5" onclick="apiHeroesGet5();" />
<input type="button" value="UPDATE 5" onclick="apiHeroesPut5();" />
<input type="button" value="DELETE 5" onclick="apiHeroesDelete5();" />
<input type="button" value="CREATE 6" onclick="apiHeroesPost();" />
<ul id="heroes"></ul>
@section Scripts {
<script type="text/javascript">
//<![CDATA[
const url = "https://example.com/api/values";
const elem = document.querySelector("#heroes");
const apiHeroesGet = async () => {
const response = await fetch(url);
if (response.ok) {
const data = await response.json();
elem.innerHTML = "";
for (let i = 0; i < data.length; i++) {
elem.insertAdjacentHTML("beforeend",
`<li>${data[i].id}: ${data[i].name}</li>`);
}
} else {
elem.innerHTML = "失敗";
}
};
const apiHeroesGet5 = async () => {
const response = await fetch(url + "/5");
if (response.ok) {
const data = await response.json();
elem.innerHTML = "";
elem.insertAdjacentHTML("beforeend",
`<li>${data.id}: ${data.name}</li>`);
} else {
elem.innerHTML = "失敗";
}
};
const apiHeroesPut5 = async () => {
const params = {
method: "PUT",
body: '{"Id":5,"Name":"Updated Hero"}',
headers: { 'Content-Type': 'application/json' }
}
const response = await fetch(url + "/5", params);
if (response.ok) {
const data = await response.json();
elem.innerHTML = "";
for (let i = 0; i < data.length; i++) {
elem.insertAdjacentHTML("beforeend",
`<li>${data[i].id}: ${data[i].name}</li>`);
}
} else {
elem.innerHTML = "失敗";
}
};
const apiHeroesDelete5 = async () => {
const params = {
method: "DELETE"
}
const response = await fetch(url + "/5", params);
if (response.ok) {
const data = await response.json();
elem.innerHTML = "";
for (let i = 0; i < data.length; i++) {
elem.insertAdjacentHTML("beforeend",
`<li>${data[i].id}: ${data[i].name}</li>`);
}
} else {
elem.innerHTML = "失敗";
}
};
const apiHeroesPost = async () => {
const params = {
method: "POST",
body: '{"Id":6,"Name":"Created Hero"}',
headers: { 'Content-Type': 'application/json' }
}
const response = await fetch(url, params);
if (response.ok) {
const data = await response.json();
elem.innerHTML = "";
for (let i = 0; i < data.length; i++)
{
elem.insertAdjacentHTML("beforeend",
`<li>${data[i].id}: ${data[i].name}</li>`);
}
} else {
elem.innerHTML = "失敗";
}
};
//]]>
</script>
}
そう言って分かりますか?
分かるとして、それで 2. を含めて質問者さんのやりたいことができますか?