Pass the i18n locale to JavaScript

Clogged while creating a multilingual app

Using jQuery and Ajax, when you select a parent category, child category candidates are displayed in a pull-down menu. However, only the child category was translated only in the default notation Vietnamese.

Example: Parent category => Question Child category => 1, Ngôn ngữ và văn hóa          2,Tập huấn kỹ thuật          3,Ứng dụng và thủ tục

Cause

The cause was that I didn't pass the locale to the controller when getting the child categories in Ajax.

category_pulldown.js


$("#parent").on("change", function () {
  //Get ID from selected parent category
  var id = document.getElementById("parent").value;
//Omission
$.ajax({
  type: 'GET',
  data: { parent_id: id }, //ID params[:parent_id]Put in and send
  url: '/categories/pulldown', //In the categories controller, get the child category with the received ID
  dataType: 'json',
}).done(function (children) { //Processing to display the acquired child category...

Although it is a partial excerpt, the locale was acquired by the following method.

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

Pass the current locale to Java Script

First, use the input tag to keep the current locale. If you write type =" hidden " as shown below, it will not be displayed on the screen even from the user's perspective.

hoge.html.erb


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

Then add locale: $ ('.current_locale'). Val () The translation languages for the parent and child categories have been unified.

category_pulldown.js


$("#parent").on("change", function () {
  //Get ID from selected parent category
  var id = document.getElementById("parent").value;
//Omission
$.ajax({
  type: 'GET',
  data: { parent_id: id, locale: $('.current_locale').val() }, //ID params[:parent_id]Put in and send
  url: '/categories/pulldown', //In the categories controller, get the child category with the received ID
  dataType: 'json',
}).done(function (children) { //Processing to display the acquired child category...

HTML is convenient because you can pass information from both Ruby and JavaScript: smiley:

Recommended Posts

Pass the i18n locale to JavaScript
The road from JavaScript to Java
Shorten the UUID to base64 in Swift.
Multilingual Locale in Java How to use Locale
Java reference to understand in the figure
Java SE8 Silver ~ The Road to Pass ~
How to pass the value to another screen
How to get the date in java
How to check the logs in the Docker container
I tried to organize the session in Rails
3 ways to import the library in Android Studio
When the server fails to start in Eclipse
I want to pass APP_HOME to logback in Gradle
pass two arguments to the URI with link_to
Add classpath: to the path specified in spring.datasource.schema
How to build the simplest blockchain in Ruby
How to check Rails commands in the terminal
I want to get the value in Ruby
How to embed JavaScript variables in HTML with Thymeleaf
The right way to see the tomcat source in eclipse
I was addicted to the NoSuchMethodError in Cloud Endpoints
Pass the condition to be used in the Java8 lambda expression filter () as a parameter
How to set the display time to Japan time in Rails
[Java] How to omit the private constructor in Lombok
Write ABNF in Java and pass the email address
I want to embed any TraceId in the log
Tokoro I rewrote in the migration from Wicket 7 to 8
It's about time to face the parenthesized monster (JavaScript)
Understand the characteristics of Scala in 5 minutes (Introduction to Scala)
Source used to get the redirect source URL in Java
To debug in eclipse
Organized how to interact with the JDK in stages
Java classes and instances to understand in the figure
How to specify the resource path in HTML import
How to debug the generated jar file in Eclipse
[Rails] How to load JavaScript in a specific view
I tried to implement the Euclidean algorithm in Java
Think about the JAVA = JAVAscript problem (needed in the future)
[Rails] How to display an image in the view
How to get the class name / method name running in Java
How to use the getter / setter method (in object orientation)
Use collection_select to pull down the data stored in Active_Hash
Understand the rough flow from request to response in SpringWebMVC
How to use JSON data in WebSocket communication (Java, JavaScript)
[Java] Change language and locale to English in JVM options
How to set chrony when the time shifts in CentOS7
[Introduction to MVEL] Aiming to be the best MVELer in the world
How to pass an object to Mapper in MyBatis without arguments
Difference between Java and JavaScript (how to find the average)
How to connect the strings in the List separated by commas
Refer to C ++ in the Android Studio module (Java / kotlin)
[Android, Java] Convenient method to calculate the difference in days
How to create a placeholder part to use in the IN clause
How to retrieve the hash value in an array in Ruby
Create a method to return the tax rate in Java
How to add the same Indexes in a nested array
Contributed to Gradle and was named in the release notes
How to derive the last day of the month in Java
How to switch Java in the OpenJDK era on Mac
[Rails] Where to be careful in the description of validation
I want to transition to the same screen in the saved state