BackEnd

RailsでERBからJavaScriptにhashを渡す方法

投稿日:

はじめに

以前、選択したプルダウンメニューに応じて別のプルダウンメニューの内容を動的に書き換えたいケースがありました。

その際、カスタムデータ属性を利用してERBファイルからJavaScrptにhashを渡してプルダウンメニューを更新しました。

今回はカスタムデータ属性を利用してコントローラで生成したhashをJavaScriptに渡す方法を記載します。

 

カスタムデータ属性とは

data-で始まる任意の名前のデータ属性を定義して使うことができます。
ただし、格納するデータは文字列でなくてはなりません。
カスタムデータ属性について

 

実装例

コントローラの実装

コントローラ側ではJavaScriptに渡したいhashを生成します。

ビューの実装

ビュー側ではコントローラ側で生成したhashをカスタムデータ属性に格納します。

格納したデータはJQueryのdata()で取得します。
(JavaScriptでも取得できますが、Object型にするためにはJSON.parse()を使う必要があります)

実行結果

実際に取得できたかどうかコンソールで確認してみます。

 

さいごに

カスタムデータ属性を利用してコントローラで生成したhashをJavaScriptに渡す方法を記載しました。

blog-page_footer_336




blog-page_footer_336




-BackEnd

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

laravel logo

Inertia使ってみた①

1 はじめに2 Inertiaとは3 ルーティング4 LaravelからReactに値渡し5 レスポンス5.1 初回5.2 page object5.3 2回目以降5.4 リロード時6 さいごに7 お ...

laravel logo

Laravel Cashier サブスクリプションに使用するテーブルを理解する

1 はじめに2 Laravel Cashierのテーブル2.1 usersテーブル2.2 subscriptionsテーブル2.3 supscription_itemsテーブル3 課金情報の更新方法4 ...

RSpecの個人的Tips集〜その1〜

1 はじめに2 テストコードの実行をスキップする3 共通のテストコードを用意する4 外部APIの返却値をスタブにする5 さいごに はじめに みなさん、テストコードは書かれているでしょうか? 私も極力書 ...

Go言語

Go 1.23 でslicesとmapsに追加された関数

1 はじめに2 slicesパッケージに追加された関数2.1 All2.2 Backward2.3 Values2.4 AppendSeq2.5 Collect2.6 SortedFunc2.7 Ch ...

Go言語

GoのWeb Application Framework

1 はじめに2 代表的なGoのWAF2.1 軽量なWAF2.2 フルスタックなWAF3 Ginを使ってみる3.1 クエリパラメータ+ポストパラメータ3.2 ファイルアップロード3.3 URLのグループ ...

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。