How to pass JavaScript GetElementById string value to Rails?-CodePudding

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

CodePudding user response：

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.