0

解決したいこと

下記の処理を作成したいです。

  1. ボタンを押下のような動作をトリガーとして、javascriptの変数をcontrollerに渡す
  2. controllerは受け取った変数で何らかの処理を行い、処理結果をviewに渡し画面表示する

1.の処理のうち「javascriptの変数をcontrollerに渡す」をどのように実現するかが分からなく、方法やコードをご教示いただけないでしょうか。

環境

  • Ruby 2.6.3
  • Rails 6.0.3

何卒よろしくお願いいたします。

2 件の回答 2

0

やり方は色々ありますが

  1. hidden_field を用意しておいてボタンが押された瞬間そのフィールドに値を埋めてあとは form submit に任せるとか

  2. ボタン押されたトリガー時に 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 側で適宜型キャストしてください

動作確認したわけではないので細かいところは間違ってたらすみません

0
  1. ボタンを押下のような動作をトリガーとして、javascriptの変数をcontrollerに渡す
  1. 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. を含めて質問者さんのやりたいことができますか?

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。