How to pass a javascript variable into a erb code in a js view?

Question

I have this Javascript view in my Rails 3 project:

app/views/expenses/new_daily.js.erb

var i = parseInt($('#daily').attr('data-num')) + 1;
//$('#daily').append('agrego fila ' + i + ' <br />');

$('#daily').append('<%= escape_javascript(render(partial: 'new_expense', locals: { i: i })) %>');

$('#daily').attr('data-num', i);

I want to pass my 'i' javascript variable to a ruby partial through locals, How I can accomplish this?

Solution 1

As far as i know there is no way to do it directly and the reason is fairly simple too, html is executed at the server side and javascript is a client side language which means its executed in your local browser, thats why if you even try to pass a variable between the two you'll have to make a request to the server, However this problem is tackled by calling an AJAX request, this AJAX request does the same thing as sending a new request to the server however it does that without refreshing or reloading the page to it gives the users the illusion that no request was made.

a guy asks a similar question Here

and you can learn more about AJAX Here on MDN:

Solution 2

Yes you can pass the value by using jquery;

<%=f.text_field :email ,:id=>"email_field" %>

<script type="text/javascript">
   var my_email= "[email protected]"
   $(document).ready(function(){
        $("#email_field").val(my_email);
   });
</script>

Solution 3

Simple answer is you can't. Partials are expanded at server side, and JavaScript variables are set later at client side. You could make i (as a variable name) a parameter of the partial and use it there.

render :partial => 'xx', :locals => { :variable => 'i' }

And in partial

alert(<%= variable %>);

Solution 4

Check out the gon gem. https://github.com/gazay/gon

It gives you a simple object you can pass variables to that will be available to your scripts via window.gon

Also referenced here http://railscasts.com/episodes/324-passing-data-to-javascript

Solution 5

1) You may create a js tag with global variable in you erb template, after that you will be able to access that variable from any js file

<%= javascript_tag do %>
   window.productsURL = '<%= j products_url %>';
<% end %>

2) You can pass data to data-attribute in erb template and access it by js on client side that way $('#products').data('products')

<%= content_tag "div", id: "products", data: {products: Product.limit(10)} do %>
   Loading products...
<% end %>

3) You can use gon, to use your Rails variables in your js

There is a good article, read it and fine solution for your specific case http://railscasts.com/episodes/324-passing-data-to-javascript, more comments are here http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast

View more solutions