How to pass JavaScript GetElementById string value to Rails?

Question

I have a method to translate different strings in Product class from English language to another. It has two variables: string and language. And for the first one I expect to get current value of the text area. Here how it looks like in JS:

var primary_value = document.getElementById('primary_body_html_value').getElementsByClassName('note-editable')[0].innerText;

And then I want to use this method inside JS function:

var translated_string = "<%= GoogleTranslator.translate(primary_value, 'de') %>"

The main question is how can use this 'primary_value' inside 'translated_string'? As I know - I can use Ajax but I am a bit new to this and I don't understand how to write correctly a method for Ajax and for Product controller. In case if you need a controller code:

class ProductsController < AuthenticatedController
  before_action :set_product, only: %i[show edit update]

  def index
    if params.include?('id')
      redirect_to edit_product_path(params[:id]) and return
    end
  end

  def edit
    redirect_to products_path, error: 'product not found' unless @product
    render :edit_polaris
  end

  def update
    if @product.update(product_params)
      render json: {
        status: :ok,
        notice: 'Saved successfully!'
      }, status: 200
    else
      render json: {
        status: :error,
        error: 'Something Went Wrong'
      }, status: 400
    end
  end

  private

  def product_params
    params.permit(
      :id,
      primary_locale: {},
      locales: {}
    )
  end

  def set_product
    @product = Product.find(product_params[:id])
  end
end

If you just want to translate value in your JS code, you can use some JS library instead of using the ruby method. If you still want to call a ruby method using JS, you can use `js.erb` file extension. — Vishal Jain, Apr 25 '22 at 15:26
As I said - I already can use Ruby method inside JS. Like here: var translated_string = "<%= GoogleTranslator.translate(primary_value, 'de') %>" The only question is how can put this 'primary_value' inside Ruby method? Because I want to get document.GetElementById string value but I don't know how to send it to Rails. — Silka, Apr 25 '22 at 15:35
Ohh okay got it, then you will have to make an ajax call in that case. You can refer to this SO answer for more details https://stackoverflow.com/a/14080273 — Vishal Jain, Apr 25 '22 at 15:55
I saw this one but anyway - thank you. I just don't understand - how can I write the correct controller method for this? Like, I need to add new product_param to my ProductsController? I would be really grateful for an example. — Silka, Apr 25 '22 at 16:04

score 1 · Accepted Answer · answered Apr 25 '22 at 19:06

This is just a sketch but hopefully can help you out. It can be inside one of your existing controller methods, for the sake of the example lets say you added a route (and controller method) called translated_string to ProductsController.

#ProductsController
 
def translated_string
   primary_value = params[:primary_value]
   @translated_string = GoogleTranslator.translate(primary_value, 'de')
   render json: {translated_string: @translated_string}
end

Now when something happens on your DOM page where primary_value is set, you send primary_value via ajax to translated_string and you get the json response with the translated string back - u can do whatever you want with it. This is just an example, there are a million ways to go about it, hope this gives you a direction.

How to pass JavaScript GetElementById string value to Rails?

1 Answers1