i18nのロケールをJavaScriptにわたす

多言語対応のアプリを作成中に詰まった

jQueryとAjaxを使って、親カテゴリを選択すると子カテゴリの候補がプルダウンで表示されるようにしました。
ところが、子カテゴリだけ、デフォルト表記のベトナム語でしか翻訳されてませんでした。

例：親カテゴリ => 質問
　　子カテゴリ => １，Ngôn ngữ và văn hóa
　　　　　　　　　２，Tập huấn kỹ thuật
　　　　　　　　　３，Ứng dụng và thủ tục

原因

Ajaxで子カテゴリを取得する際、コントローラにロケールを渡してないことが原因でした。

category_pulldown.js

$("#parent").on("change", function () {
  // 選択した親カテゴリからIDを取得
  var id = document.getElementById("parent").value;
// 中略
$.ajax({
  type: 'GET',
  data: { parent_id: id }, // IDをparams[:parent_id]に入れて送信
  url: '/categories/pulldown', // categoriesコントローラにて、受け取ったIDで子カテゴリを取得
  dataType: 'json',
}).done(function (children) { // 取得した子カテゴリを表示させる処理...

一部抜粋ですがロケールの取得は以下の方法でやってました。

application_controller.rb

before_action :set_locale

  private

  def set_locale
    I18n.locale = locale
  end

  def locale
    @locale ||= params[:locale] ||= I18n.default_locale
  end

  def default_url_options(options = {})
    options.merge(locale: locale)
  end

現在のロケールをJava Scriptへわたす

まずは、inputタグを使って現在のロケールを保持させます。
以下のようにtype="hidden"と書くと、ユーザーから見ても画面には表示されません。

hoge.html.erb

<input type="hidden" class="current_locale" value="<%= I18n.locale %>">

次にlocale: $('.current_locale').val()を追加すると
親子カテゴリの翻訳言語が統一されました。

category_pulldown.js

$("#parent").on("change", function () {
  // 選択した親カテゴリからIDを取得
  var id = document.getElementById("parent").value;
// 中略
$.ajax({
  type: 'GET',
  data: { parent_id: id, locale: $('.current_locale').val() }, // IDをparams[:parent_id]に入れて送信
  url: '/categories/pulldown', // categoriesコントローラにて、受け取ったIDで子カテゴリを取得
  dataType: 'json',
}).done(function (children) { // 取得した子カテゴリを表示させる処理...

HTMLはRubyからもJavaScriptからも情報の受け渡しができるので便利ですね