Accessing Javascript variable from ruby

Question

Passing data from Ruby to Javascript is easy, for example:

<script type="text/javascript">

    function change_value(val){

      alert ("<%= @alert %>")   
      }
    }
</script>

This will sent an alert with the data stored at the alert variable in the controller.

But I don't know how it works in the opposite direction, for example, if I need to store an element id into a controllers variable:

<script type="text/javascript">

    function change_value(element){
      <% @element_id = *** element.id *** %>

      alert ("<%= @element_id %>")   
      }
    }
</script>

The real deal is up next, the code surrended by *** are supposed to be the needed javascript values (@billeable_qts is a Hash):

<script type="text/javascript">

  function change_value(product){

    <% @billeable_qts[****product.id****] = ***document.getElementById('product.id').value****  %>
    <% @billeable_qts.each do |key, value| %>
       <% alert = "Key = " + key + ", value: " + value.to_s%>
       alert ("product: <%= alert %>")
    <% end %>


  }

</script>

Answer 1

I'm assuming that you are referring to an embedded Ruby file with something like a js.erb extension.

Those instance variables, such as @element_id, are used to generate a javascript file to then run client side (ie in the browser)

It's important to point out here, that the variable @element_id is only used to generate the javascript file then you can essentially consider it "gone" after that javascript file is created.

That is why you can "pass" Ruby variable values into the javascript file. However, you cannot pass values obtained by the javascript when run client side back to those Ruby variables because they essentially no longer exist as their only purpose was to create the javascript file.

So the controller action used to generate that file has essentially served it's purpose, and it and it's variables, etc are no longer available.

Now, it appears that you have a javascript variable, obtained client side, that you want to manipulate before posting it in the js alert.

You have two choices

1) You can just manipulate it using pure javascript.

<script type="text/javascript">

    function change_value(element){
      idToAlert = element.id;
      idToAlert++;
      alert (idToAlert);   
      }
    }
</script>

2) If for some reason that value needs to be modified based on something like database values that the Rails app has access to, you can post it to a controller and action then return it back to the javascript. (Note: I'm using jQuery library here for efficiency)

<script type="text/javascript">

function change_value(element){
$.ajax({
  url: "/controller/update_element_id",
  type: "POST",
  data: {"old_element_id": <%= @element_id %>, "new_element_id": element.id},
  success: function(response) {
    alert (response);
  },
  error: function(response) {
    console.log('error: ' + response);
  }
});
}
</script>

Controller#update_element_id might be an endpoint for a JS POST request that looks like this.

def update_element_id
  item = Model.where(element_id: params["old_element_id"]).first
  item.update_attributes(element_id: params["new_element_id"])
  render json: {element_id: item.element_id}
end

I hope this helps. Glad to provide any additional clarification.