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.
Ce ne pas possible, mon ami.
As mentioned in the comments, Ruby is server; javascript is client. This means one of two things:
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);
});
color_form? Thanks! again.
preload?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?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.
