嵌套模型表单-Railscast#196修订-通过jQuery添加字段不起作用 [英] Nested Model Forms - Railscast #196 revised - Adding fields via jQuery not working

问题描述

我遵循了修订了#196的轨道，一切都进行了基本上没问题，但是我无法将新字段添加到嵌套表单中. 删除字段"功能运行良好，但是在单击"link_to_add_fields"后，浏览器跳到页面顶部，并且没有新字段出现.

I was following the Railscast #196 revised and everything went basically fine, but I am not able to add new fields to the nested form. The "remove fields" function works nicely, but after click on "link_to_add_fields", the browser jumps to the top of the page, and no new field appears.

此railscast已经有很多问题，例如此处或此处，以及我试图阅读所有这些内容，但是其中大多数是指2010年的原始演员表. 我现在被困了几个小时，但我不知道问题出在哪里.抱歉，如果是菜鸟错误，我对Rails还是很陌生的. 任何帮助将不胜感激！

There are already a ton of questions to this railscast, like here or here, and I tried to read all of them, but most of them are referring to the original casts from 2010. I am stuck for hours now, and I can't figure out, where my problem is. Sorry, if its a rookie mistake, I am quite new to rails. Any help would be really appreciated!

我遵循的是#196修订版，使用的是Rails 3.2.13，Ruby 1.9.3

I was following the #196 revised version, using Rails 3.2.13, Ruby 1.9.3

models/post.rb

models/post.rb

class Post < ActiveRecord::Base
    attr_accessible :content, :title, :image, :postfiles_attributes
    has_many :postfiles, :dependent => :destroy 
    accepts_nested_attributes_for :postfiles, allow_destroy: true
end

models/postfile.rb

models/postfile.rb

class Postfile < ActiveRecord::Base
  attr_accessible :dropbox, :gdrive, :post_id
  belongs_to :post
end

views/posts/_form.html.erb

views/posts/_form.html.erb

<%= simple_form_for @post do |f| %>

  <%= f.fields_for :postfiles do |builder| %>
       <%= render 'postfile_fields', f: builder %>
  <% end %>
  <%= link_to_add_fields "Add File", f, :postfiles %>

<% end %>

views/posts/_postfile_fields.html.erb

views/posts/_postfile_fields.html.erb

<fieldset>  
    <%= f.text_field :dropbox %>
    <%= f.hidden_field :_destroy %>
    <%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>

postfiles.js.coffee

postfiles.js.coffee

jQuery ->
   $('form').on 'click', '.remove_fields', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()

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

application_helper.rb

application_helper.rb

module ApplicationHelper
  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
end

预先，非常感谢您的帮助！

Upfront, thank you so much for your help!

更新:我正在使用简单格式.请参见上面的_form文件.这可能是个问题吗?

UPDATE: I am using simple-form. See the _form file above. Could this be an issue?

更新II:

我收到一个Javascript错误，不确定是否是这里的问题所在: Chrome称其为未捕获的SyntaxError:意外的保留字"，而Firebug称其为"SyntaxError:未终止的字符串文字". 错误指向此js代码部分:

I get an Javascript error, not sure if this could be an issue for the problem here: Chrome calls it "Uncaught SyntaxError: Unexpected reserved word " and Firebug calls it "SyntaxError: unterminated string literal". The error points to this js code part:

loadData: function(data){

   this.$editor.addClass('st-block__editor');

   this.$editor.html("
   <div class='st-block__inner'>
      <div class='media'>
        <a class='pull-left' >
          <img class='media-object link-pic' src='" + data.thumbnail_url + "'>
        </a>
        <div class='media-body'>
          <div class='link-source'>" + data.provider_name + "</div>
          <div class='link-title'> <a href='#'>" + data.title + "</a></div>    
          <div class='link-description'>" + data.description + "</div>  
        </div>
      </div>
    </div>
  ");
},

更新3:

帖子控制器可能会成为问题的一部分吗?

Could the posts controller be part of the issue?

这是我的posts_controller.rb

This is my posts_controller.rb

def new
    @post = current_user.posts.new
    @post.postfiles.build

    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @post }
    end
  end

再次感谢您的帮助！

推荐答案

我偶然发现动态表格上的#403轨道，其中嵌套表单也是本教程的简要说明. Ryan在本集中使用了javascript部件的经过编辑的代码，以使该代码与Turbolinks兼容.我在postfiles.js.coffee中尝试了以下版本，并且有效！最终，添加字段链接将生成新字段.

I found via accident Railscast #403 on Dynamic Forms in which nested forms were briefly part of the tutorial, too. Ryan used in this episode an edited code for the javascript part to make the code compatible with Turbolinks. I tried the version below in my postfiles.js.coffee and it worked! The add fields link is finally generating new fields.

$(document).on 'click', 'form .remove_fields', (event) ->
  $(this).prev('input[type=hidden]').val('1')
  $(this).closest('fieldset').hide()
  event.preventDefault()

$(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()

这篇关于嵌套模型表单-Railscast#196修订-通过jQuery添加字段不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！