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


関連記事

Go言語

Go言語で使えるORMライブラリ

1 はじめに2 ORMライブラリ2.1 GORM2.2 SQLBoiler3 GORMを使ってみる3.1 導入3.2 migration3.3 insert3.4 select3.5 update3. ...

Go言語

Go言語 gocraft/workを使って常駐プロセスでジョブを処理させる

1 はじめに2 workの特徴3 workを使えるようにする3.1 Redisのインストール3.2 Go用のライブラリインストール4 Enqueue〜ジョブ実行まで4.1 Enqueue側4.2 ジョ ...

rails

関連するモデルのレコードを一緒に作成する方法

1 はじめに1.1 前提条件2 実装2.1 モデルの作成2.2 コントローラの作成2.3 Viewの作成3 さいごに はじめに フォームからレコードを作成する際に、関連するモデルのレコードを一緒に作成 ...

Go言語

Golangのsyncパッケージによる同期・排他制御

1 はじめに2 sync.WaitGroup3 sync.Mutex4 sync.RWMutex5 sync.Map6 sync.Once7 sync.Pool8 さいごに9 おすすめ書籍 はじめに ...

laravel logo

LaravelのFacade(ファサード)とは? 何気なく使用していた裏側の仕組みを解説!

1 はじめに1.1 Facadeを使用しているクラス2 Facadeの仕組み3 Facadeの作成3.1 サンプルコードに必要な実装3.2 Serviceの作成3.3 Facadeクラスの作成3.4 ...

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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