Form Builder Object on AJAX Callback


My application has a select box for users to choose a “mapping” for the upload. Based on mapping, user should see the default options selected in that form. When user changes the mapping, an AJAX request gets called and renders a js.erb file. The rendered js should render a partial that has fields_for a nested model. My challenge is, How to pass the form build object to the partial on AJAX callback?


<%= form_for :upload do |f| %>
  Some divs....

    <label>Mapping: </label>
    <%= :mapping_id, options_from_collection_for_select(@mappings, "id"
    , "name"), {}, { class: "default_mapping_change" } %>

  <div id="mapping_option">
        <%= render "mapping_option_form", f: f, default_mapping: @mapping %>
<% end %>

On my ajax callback, I replace “mapping_option” div with the update object.


Create a new form in the js.erb file and passing that one to the partial.


'<%= form_for :upload do |f| %>'
    $("#mapping_option").html("<%= j(render "mapping_option_form", f: f,
    default_mapping: @mapping) %>");
'<% end %>'

The single quotes around the form tag are important, or else there will be some javascript escaping issue.