Render partial after change select

Question

I have the following view

<%= form_for @survey do |f| %>
  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %> <br><br>
    <%= f.label :description %><br>
    <%= f.text_field :description %><br><br>
  </div>

  <%= f.fields_for :survey_sections do |builder| %>
    <%= builder.text_field :title, :placeholder => "Abschnittsbeschreibung" %><br>
    <%= builder.fields_for :questions do |quest| %>
      <%= quest.text_field :text, :placeholder => "Frage" %> <br>
      <%= quest.fields_for :answers do |ans| %>
        <%= ans.text_field :text, :placeholder => "Antwort" %> <br>
      <%end%>
    <%end%>
    <%= select_tag("question_type",options_for_select([["Radio", "radio"],["Checkbox", "check"]])) %>
  <% end %>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

I want to render a partial in this view after selecting one of the options. How can i do this?

shirakia · Answer 1 · 2015-10-28T15:17:42.400

2

Easiest way is render the partial with display:none

<div id='foo' style='display:none'>
  <%= render :foobar %>
</div>

And when a user select something, show it by JS(jQuery).

$('[name=question_type]').change(function() {
  $('#foo').show();
});

edited Oct 28 '15 at 15:17

answered Oct 28 '15 at 14:46

shirakia

2,369
1
22
33

2

I wouldn't do this in a form, because the inputs in the hidden div will **still** be passed as parameters when the form is submitted. It is much better to load/remove/replace the contents of the div within the `change` event handler (rather than show/hide). – Thomas Hennes Oct 28 '15 at 16:49
Hidden `input` tag values will be passed but just `div` – shirakia Oct 29 '15 at 00:55

Abhi · Answer 2 · 2015-10-29T07:21:40.633

0

If you are using jQuery, then try this:

VIEW

<%= select_tag("qustion_type",options_for_select([["Radio", "radio", {:onclick => "someFunction(#{controller_path})"}],["Checkbox", "check", {:onclick => "someFunction(#{controller_path})"}]])) %>

JAVASCRIPT

function someFunction(url) {
  jQuery.ajax({
    url: url,
    data: {some_data: "data_value"},
    success: function(data) {
      //data has the html code that you render in controller
    }
  });
}

EDIT (See Comments)

As you asked that you need to render a partial on each option select. So, for each option select you need to hit a controller method. In my example url is that controller end point(eg:- render_radio_some_controller_path).

def render_radio
  render :partial => "radio"
end

After this, it will go to the success block of Ajax call and data will have the html defined in radio.html.erb. Now, you just have to use jQuery to update the desired div html with data(Eg:- jQuery("#some_div").html(data);)

edited Oct 29 '15 at 07:21

answered Oct 28 '15 at 15:05

Abhi

4,123
6
45
77

Could you explain me what i have to write in the controller that i can render _radio.html.erb file? Or which data i have to pass the variable data? – rob.d Oct 29 '15 at 07:12
I don't know what iam doing wrong.i have the function someFunction(url){ jQuery.ajax({url: url, data: {some_data: "data_value"}, success: function(data) { jQuery("#some_div").html(data); } }); } it doesn't work and i dont know why :( – rob.d Oct 29 '15 at 10:54
Then rob, it's really hard to tell you what's wrong until I see the error logs. – Abhi Oct 29 '15 at 10:59
could you may tell me an tutorial or something like this which explain a solution for my problem? – rob.d Oct 29 '15 at 11:12
Seems like [THIS](http://stackoverflow.com/a/11142247/2968762) post says the exact same thing I'm trying to explain. Just don't go for hide/show option as it has performance issues. Go with ajax call solution. – Abhi Oct 29 '15 at 11:22

Render partial after change select

2 Answers2