use javascript variable inside ruby code

Question

In my ruby form,

$('#some_id').change(function(){
 var value = $(this).val();
 var index = $(this).attr('id').to_i;
 $('option_value_0').html('<%= escape_javascript render partial: 'color_form', locals: { f: f, index: index, id: value } %>')
})

This is the javascript part. And it throws an error because of

undefined method index and value.

How can i solve this? Thanks in Advance.

• Rory McCrossan: Ruby runs on the server, JS on the client, so the two cannot directly interact. To do what you require you would need to send your JS variables to the server using AJAX.

Answer 1

Ce ne pas possible, mon ami.

---

As mentioned in the comments, Ruby is server; javascript is client. This means one of two things:

• build the javascript at runtime (not recommended)
• send the ajax / javascript value to the server (via Ajax)

To get this working properly, you'll need to send the request through ajax:

#app/assets/javascripts/application.js
$(document).on("change", "#some_id", function(e) {
 $.get("forms/update", {index: $(this).val(), value: $(this).attr('id').to_i});
});

This would need to be addressed by the appropriate route & controller action:

#config/routes.rb
get "color_form", to: "application#color_form"
#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
 respond_to :js, :html
 def color_form
 @id = params[:id]
 @value = params[:value]
 end
end
#app/views/application/color_form.js.erb
$('option_value_0').html('<%=j render partial: 'color_form', locals: { index: @index, id: @value } %>')

--

Yes, it's long-winded, but it's the right way.

If you wanted to shortcut, you'd be able to preload the color_form partial, and then use the javascript functionality to change the id or value params. I can write about this if you want.

---

Preload

If you wanted to do this without ajax, the standard way (this includes modals, too) is to append the partial to your page and "hide" it.

This way, your JS has the actual HTML code to either show, or append to other parts of the page:

#view
<div class="hidden">
 <%= render partial: 'color_form', locals: { f: f, index: "x", id: "y" } %>
</div>
#app/assets/javascripts/application.js
$(document).on("change", "#some_id", function(e) {
 $partial = $(".hidden").html();
 $partial.find("#id").html($(this).attr('id').to_i);
 $partial.find("#index").html($(this).val());
 $('option_value_0').html($partial);
});

• Md.Mostafizur Rahman Sahed: Thank you for your brief description. Its really nice! Can you please describe a bit about preload the color_form? Thanks! again.
• Richard Peck: What do you mean by preload?
• Md.Mostafizur Rahman Sahed: You wrote that, If you wanted to shortcut, you'd be able to preload the color_form partial, and then use the javascript functionality to change the id or value params.. So how can i do this?
• Richard Peck: ohhh sorry - let me write that for you

Answer 2

You can't inject ruby code in an HTML page using JavaScript. ERB templates are processed on the server, before the resulting HTML page is sent to the browser. You can have a look at the source of your page once it is loaded by the browser, you won't see any <%= ... %> tags, as they have already been rendered by the server.

Your JavaScript adds ruby code to the page once it is already in the browser, but the browser won't understand ruby.

You might want to look into a JavaScript framework which supports partials (or templates), like AngularJS for example.