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

Laravelのコントローラの基礎

1 はじめに2 ルーティング2.1 使用可能なメソッド2.2 リダイレクト2.3 Viewの返却2.4 ルートパラメータ2.5 ミドルウェア2.6 プレフィックス3 バリデーション3.1 コントローラ ...

laravel logo

Laradock環境にPHPStormからXdebugする

1 はじめに2 Laradock側の設定変更2.1 xdebug.iniファイル2.2 .env2.3 コンテナの再構築3 PHPStormの設定3.1 Preferences3.1.1 Build, ...

Go言語

Go 1.19でGoDocに追加された機能

1 はじめに2 GoDocの機能追加2.1 セクションタイトル(Headings)2.2 リンク2.3 リスト2.4 パッケージの追加3 おまけ4 さいごに5 おすすめ書籍 はじめに 8月2日にGo ...

Laravelの開発環境をdocker-composeで一から構築してみる

1 はじめに2 nginxでwebサーバを立てる2.1 default.conf作成2.2 index.html作成2.3 nginxコンテナ起動3 nginxでPHP-FPMを動作させる3.1 do ...

Rust入門してみた (構造体 / トレイト)

1 はじめに2 構造体2.1 メソッド2.1.1 関連メソッド2.2 トレイト2.2.1 構造体のフィールドの1つとして、トレイトのインスタンスを持つ場合2.3 derive属性3 おすすめ書籍 はじ ...

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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