将附加字段动态添加到 rails 表单

Posted

技术标签:

【中文标题】将附加字段动态添加到 rails 表单【英文标题】:Adding additional fields dynamically to a rails form 【发布时间】:2019-08-22 11:36:27 【问题描述】:

看到一些教程,我尝试构建一些嵌套表单,并选择在单击添加按钮时动态添加字段。 我在这里是全新的,发现很难解决问题,因为我的代码不起作用,也没有给出任何错误! 这是表格

<%= form_for [@project, @feature], class: "form-group inline", remote: true  do |builder| %>

    <%= builder.fields_for :tasks, remote: true do |form| %>
      <%= render "task_fields", f: form %>
    <% end %>

    <%= link_to_add_fields "Add Field", builder, :tasks %>

    <%= builder.submit class: "btn btn-primary m-2" %>

<% end %>

而Application helper方法link_to_add_fields是->

  def link_to_add_fields(name, f, association)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + "_fields", f: builder)
    end
    link_to(name, '#', class: "add_fields", data: id: id, fields: fields.gsub("\n", ""))
  end

而js代码是->

$(document).on 'click', 'form .add_fields', (event) ->
  time = new Date().getTime()
  regexp = new RegExp($(this).data('id'), 'g')
  $(this).before($(this).data('fields').replace(regexp, time))
  event.preventDefault()

问题是那里没有显示错误但什么都不做(只执行 href="#" 操作)。 如何实现功能,以便我可以将字段动态添加到嵌套表单

【问题讨论】:

是否有必要构建自己的解决方案?有许多不错的库可以开箱即用地执行嵌套字段。例如cocoon 是的,我不能使用 gem,这就是问题所在@cnnr @Achy97 在浏览器中打开开发人员工具并转到“添加字段”字段按钮 DOM 节点,然后单击页面中的按钮,看看是否可以看到修改的 DOM。如果不是,那么问题很可能出在您编写的 JS 事件处理程序中。您也可以使用 Developer tools 的 Debugger 工具进行调试,以了解您的 JS 正在做什么。 @JigneshGohel 谢谢我可以按照您的指示找到错误-实际上没有设置一些依赖项 【参考方案1】:

实际上只针对application.js中的那些依赖

//= require jquery
//= require jquery_ujs

【讨论】:

以上是关于将附加字段动态添加到 rails 表单的主要内容,如果未能解决你的问题,请参考以下文章

嵌套 Rails 表单中的动态值未更新

添加时动态数据消失

将 Telerik Datepicker 添加到动态添加的表单字段

如何将验证应用于动态添加的字段到表单

如何将动态添加的表单字段发布到mysql数据库

动态添加字段到 laravel 表单