質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.13%

Rails+jsで動的な多言語対応フォームを作りたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 854

score 13

ユーザーが自身の情報を設定できる画面で、そのユーザーが選択した言語に対してフォーム要素を表示し、データを保存したいです。
・DBには該当カラム(日本語)と、該当カラム_en(英語)、該当カラム_ch(中国語)を用意
・該当ページ=> '/users/settings'
・該当ページには言語を選択するselectボックス、実際に値を入力するフォームを設置
・selectで選んだ言語に対してフォームのvalue値が動的に変わり、フォームによるパラメータの保存先も言語ごとに設定できるようにしたい

 該当コード

# ルーティング
/users/settings => settings#root
/settings/get_location => settings#get_location

# Userモデル
- nickname
- nickname_en
- nickname_ch
- profile
- profile_en
- profile_ch

# Usersコントローラー
...略

# settingsコントローラー
def root
  @user = current_user
end

def get_location
    render partial: 'localized_form', locals: {localized_nickname: params[:localized_nickname].to_sym}
end
// /settings/root.html.haml
// 独自のformヘルパーを使用(form_forの拡張)
// ヘルパーメソッドの内部で、selectタグによって言語を選択できるように設定
= my_own_form_for @user, class: "user-form" do |f|
    = f.my_own_text_field(:nickname)
    = f.my_own_text_field(:profile)

// jqueryを使用
:javascript
    $('.localized-form > select').on('change', function(e) {
    e.preventDefault();
    locale_id = parseInt($(e.currentTarget).find('option:selected').val())
    if locale_id == 2
      localized_nickname = 'nickname_en'
      localized_profile = 'profile_en'
    else if locale_id == 3
      localized_nickname = 'nickname_ch'
      localized_profile = 'profile_ch'
    else
      localized_nickname = 'nickname'
      localized_profile = 'profile'

    $.ajax(
      type: 'GET'
      url: '/settings/get_location'
      data: {
        localized_nickname: localized_nickname
      }
    ).done (data) ->
      $('.localized_form').html(data)
    });
// 上記コードが吐き出すselect要素は以下のようなもの
<div class='localized-form'>
    <select>
        <option value=1 selected="selected">日本語</option>
        <option value=2>英語</option>
        <option value=3>中国語</option>
    </select>
</div>
// partial下の'_localized_form.html.haml'
= f.my_own_text_field(localized_nickname)

 実現したいこと

selectで選択した言語に応じて該当form要素を再描画(or更新)する
・f.my_own_text_field(:nickname)で:nicknameの部分を動的に更新したい(このシンボル値がformのvalue値を表示する時とデータベースへ保存する際に参照される)

 詰まっているところ

・ajaxで'ActionView::MissingTemplate'エラーが発生する
・仮にajax通信が成功したとしても、paramsの中身(localized_nickname)をどのようにviewに渡してform部分を更新したら良いのかわからない

初歩的な質問かもしれませんがよろしくお願いいたします。不備があれば追記して行きます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る