BackEnd

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

投稿日:

はじめに

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

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

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

 

カスタムデータ属性とは

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

 

実装例

コントローラの実装

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

ビューの実装

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

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

実行結果

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

 

さいごに

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

page_footer_300rect




page_footer_300rect




-BackEnd

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

rails

Shrineをモデルに関連付けないで使用してハマったこと

1 はじめに2 アップロード時にリサイズする3 アップロード時のバリデーション4 アップロード時に古いファイルを削除する5 さいごに はじめに ShrineはRailsでのアップロードを簡単に行えるよ ...

laravel logo

Laravelで認証APIを作る

1 はじめに1.1 条件1.2 JWTとは2 準備2.1 認証機能を有効化2.2 jwt-authのインストール2.3 コンフィグファイルの作成2.4 secretの作成3 Userモデルを修正4 g ...

軽量なAlpine Linuxイメージでgitbookのローカル環境を構築する

1 はじめに2 Alpine Linuxとは3 Docker本体のインストール4 サンプルリポジトリのダウンロード5 dockerイメージ作成6 Gitbook初期化&実行7 Dockerの ...

PHPerだけどKotlinを勉強したって良いよね その2〜コンストラクタ編〜

1 はじめに2 コンストラクタ2.1 プライマリコンストラクタ2.2 セカンダリコンストラクタ2.3 ニックネームのみを入力した人2.4 ニックネームと email を入力した人2.5 Faceboo ...

Go言語

Go言語でテスト作成 testifyの基本的な使い方

1 はじめに2 Goテストフレームワークのスター数3 testifyについて3.1 testifyを導入する方法4 assartionについて4.1 assertion紹介4.2 ElementsMa ...

フォロー

follow us in feedly

page_side_300rect

2017年8月
« 7月   9月 »
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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