Search code examples
ruby-on-railssimple-formglobalize

Translated fields in one form (Globalize + Simple Form)

I have simple_form (3.2.0) and in combination with globalize (5.0.0) and Rails4, I want to give an option for users to provide translation for two languages (czech and english) in the same profile form. After spent few hours, I am stuck and not sure how to do it. 

<%= simple_form_for current_user, :url => user_path, html: { data: {type: 'script'}, id: "nonprofit-profile-form" }, remote: true, authenticity_token: true do |f| %>
    <%= f.simple_fields_for :non_profit, current_user.rolable do |np| %>

<div id="czech" class="tab-content" style="display: none;">
   <div class="row">
       <%= np.input :description, as: :text, label: false, :required => true, placeholder: t(:profiles_nonprofit_field_description), :input_html => { :rows => 16 } %>
   </div>
</div>

<div id="english" class="tab-content" style="display: none;">
   <div class="row">                         
       <%= np.input :description, as: :text, label: false, :required => true, placeholder: t(:profiles_nonprofit_field_description), :input_html => { :rows => 16 } %>
   </div>
</div>

    <% end %>
<% end %>

Anyone who was solving the same case with the gems above? Thank you for any advices. Miroslav

Form:

enter image description here

SOLUTION

  1. Install the gem Globalize Accessors (https://github.com/globalize/globalize-accessors)

  2. Add the following code to model:

    globalize_accessors :locales => [:en, :cs], :attributes => [:description]

  3. Add the following code to controller:

    def custom_params
    permitted = NonProfit.globalize_attribute_names + [:name] + [:ico] + [:website] + [:non_profit_category_id]
    params[:user][:non_profit].permit(*permitted)
end

  4. Add the following code to view: 

    <div id="cestina" class="tab-content" style="display: none;">
    <div class="row">
        <%= np.input :description_cs, as: :text, label: false, :required => true, placeholder: t(:profiles_nonprofit_field_description), :input_html => { :rows => 16 } %>
        <div class="remainChars"><span class="usedChars">0</span>/1000</div>
     </div>
</div>

<div id="english" class="tab-content" style="display: none;">
     <div class="row">
         <%= np.input :description_en, as: :text, label: false, :required => true, placeholder: t(:profiles_nonprofit_field_description), :input_html => { :rows => 16 } %>
         <div class="remainChars"><span class="usedChars">0</span>/1000</div>
      </div>
</div>
Solution

  • Ok, I found the solution:

    1. Install the gem Globalize Accessors (https://github.com/globalize/globalize-accessors)

    2. Add the following code to model:

      globalize_accessors :locales => [:en, :cs], :attributes => [:description]

    3. Add the following code to controller:

      def custom_params
    permitted = NonProfit.globalize_attribute_names + [:name] + [:ico] + [:website] + [:non_profit_category_id]
    params[:user][:non_profit].permit(*permitted)
end

    4. Add the following code to view: 

      <div id="cestina" class="tab-content" style="display: none;">
    <div class="row">
        <%= np.input :description_cs, as: :text, label: false, :required => true, placeholder: t(:profiles_nonprofit_field_description), :input_html => { :rows => 16 } %>
        <div class="remainChars"><span class="usedChars">0</span>/1000</div>
     </div>
</div>

<div id="english" class="tab-content" style="display: none;">
     <div class="row">
         <%= np.input :description_en, as: :text, label: false, :required => true, placeholder: t(:profiles_nonprofit_field_description), :input_html => { :rows => 16 } %>
         <div class="remainChars"><span class="usedChars">0</span>/1000</div>
      </div>
</div>