在不重新加载页面的情况下扩展表单，rails

Question

我正在寻找一种无需重新加载页面即可扩展表单的解决方案。首先，我尝试用咖啡或 javascript 渲染部分图像，但 escape_javascript 没有用。

这是风景

<%= form_for @recipe = current_user.recipes.build do |f| %>
  <%= f.label :name, "Recipe Name" %>
  <%= f.text_field :name %>
  <%= button_to "Add Ingredient", '#', class: "btn btn-lg btn-primary", id: "add" %>  
  <p></p>
  <%= f.submit class: "btn" %>
<% end %>

上面的表格应该通过每次点击按钮来扩展下面的部分

  <div id="recipe-ingredients">Quantity
    <%= f.fields_for :quantities, @recipe.quantities.build do |quantity| %>
      <%= render 'quantity_fields', f: quantity %>
    <% end %>
  </div>

_quantity_fields

<%= f.label :amount, "Amount:" %>
<%= f.text_field :amount %>
<%= f.collection_select(:ingredient_id, Ingredient.all, :id, :name) %>

此方法无效 (recipes.js.erb)

$(document).ready(function() {
  $("#add").click(function() {
    $("p").append("<%= escape_javascript 
    render(:partial => 'quantities') %>");
  });
});

有一个解决方法（见下文），但我正在寻找更好的解决方案。

$(document).ready(function() {
  $("#workout-week").append(<%= escape_javascript(
    Haml::Engine.new(File.read(File.join(Rails.root,'app/views',
    '_show_period.html.haml'))).render(Object.new, period: @period)) %>);
});

第二种方法 是在 Coffee 或 JavaScript 中写下以下几行：

<%= f.fields_for :quantities, @recipe.quantities.build do |quantity| %>
  <%= f.label :amount, "Amount:" %>
  <%= f.text_field :amount %>
  <%= f.collection_select(:ingredient_id, Ingredient.all, :id, :name) %>
<% end %>

Answer 1

我是新手，所以对此持保留态度，但您是否尝试过在适当的控制器函数中使用 render :foo 而不是 redirect_to :foo？

Answer 2

我用cocoon解决了

<%= form_for @recipe do |f| %>
  <div class="field">
    <%= f.label :name %>
    <br/>
    <%= f.text_field :name %>

    <%= f.fields_for :quantities do |quantity| %>
      <%= render 'quantity_fields', :f => quantity %>
    <% end %>
    <div class="links">
      <%= link_to_add_association 'add', f, :quantities %>
    </div>
  </div>
  <%= f.submit %>
<% end %>

在不重新加载页面的情况下扩展表单，rails

Extend forms without page reload, rails

ruby

forms

ruby-on-rails

erb