Render rails partial with jquery on click

Question

I have an application that lets a user build a resume. Currently I have one form (Resume) that loads nested forms in it for each of my other models (Education, Experience, etc.). By default those sections are visible. Instead of having the forms visible by default, I would like the user to be able to click the section they would like to add (for ex: they would click "Education" from a list and it would append the education form block.) using jquery. In my form a made a div with a class of "form-block-section" and I moved each individual form block into it's own partial.

# _form.html.erb

<%= form_for(@resume) do |f| %>
  <% if @resume.errors.any? %>
   <div id="error_explanation">
    <h2><%= pluralize(@resume.errors.count, "error") %> prohibited this resume from being saved:</h2>

    <ul>
      <% @resume.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
   </div>
  <% end %>

  <div class="field">
    <%= f.text_field :title, class: "form-control", placeholder: "Title" %>
  </div>
  <div class="field">
    <%= f.text_area :summary, class: "form-control", placeholder: "Summary" %>
  </div>
  <div class="field">
    <%= f.text_field :job_title, class: "form-control", placeholder: "Desired Job Title" %>
  </div>

  <div class="form-block-section">

     *****
     // THIS IS WHERE I WANT THE FORM BLOCKS TO BE APPENDED WHEN THE USER CLICKS THE LINK

  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Like I said I created a partial for each resume section the user could choose. Here's an example.

# _education_block.html.erb

<div id="educations" class="field build-block">
   <h3>Education</h3>
   <%= f.fields_for :educations do |education| %>
   <% end %>
   <div class="links">
     <%= link_to_add_association 'add education', f, :educations %>
   </div>
</div>

In my resumes.js

# resumes.js

$('#add-education-block').on('click', function(){
    $('.form-block-section').append("<%= escape_javascript(\"#{render 'education_block'}\").html_safe %>");
});

NOW THE PROBLEM:

It's rendering on my page as just a string: <%= escape_javascript("#{render 'education_block'}").html_safe %>

Sergey Sokolov Sergey Sokolov · Accepted Answer · 2014-12-10T20:05:14

You need add .erb to resume.js - resume.js.erb.

In addition may be you want to use nested forms - https://github.com/ryanb/nested_form

Render rails partial with jquery on click

1 Answers