BackEnd

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

投稿日:

はじめに

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

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

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

 

カスタムデータ属性とは

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

 

実装例

コントローラの実装

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

ビューの実装

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

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

実行結果

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

 

さいごに

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

page_footer_responsive




-BackEnd

執筆者:

免責事項

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


comment

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

CAPTCHA


関連記事

aws

ALB+EC2な環境でhttpをhttpsにリダイレクトする

1 はじめに1.1 前提条件2 ALBの設定3 Nginxの設定3.1 注意点4 さいごに はじめに httpsに対応済みのWebサイトの場合、httpでアクセスされた時にhttpsでリダイレクトする ...

Go言語

Go 1.18で追加されるGenericsの紹介

1 はじめに2 GoのGenerics2.1 Genericsの主な仕様2.2 Genericsの制限3 Genericsを使ってみる3.1 基本形3.2 呼び出しの際の型引数を省略する3.3 型制約 ...

FastAPIのPath Operationをasync defにするときはブロッキングに気をつけよう!

1 はじめに2 Path Operationと並行処理3 挙動の確認4 対応方法4.1 asyncioを使って自力で非同期化する4.2 async対応済みのパッケージを使う4.3 async defを ...

WebアプリからLINEのメッセージを送る方法

1 はじめに2 Messaging APIとは2.1 Messaging APIの仕組み2.2 Webhookイベント2.3 メッセージオブジェクトの種類2.4 料金形態3 LINE Develope ...

Rust入門してみた その4 モジュール編

1 はじめに2 Rustのモジュール2.1 モジュールツリーの構築2.2 サブモジュール2.3 各モジュールの実装2.4 モジュールのプライバシー3 さいごに4 おすすめ書籍 はじめに これまでの記事 ...

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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