jQuery 不更新 Rails 中的嵌套表单

Question

我正在关注Railcasts 197为了为我的应用程序制作嵌套表单。我想做的是显示一个“删除”链接，该链接使用 jQuery 从表单中隐藏一行。

如果我点击删除，则不会发生任何事情，但如果我点击提交并且页面上有错误，则该行将被删除!

我已经尝试修复好几天了，但我就是看不出是否缺少某些内容或我需要添加某些内容，任何帮助将不胜感激。

代码:

model/album_review_proposal.rb

class AlbumReviewProposal < ActiveRecord::Base
  attr_accessible :description, :user_id, :album_attributes
  validates :description, :presence => true

  has_one :album, :dependent => :destroy
  accepts_nested_attributes_for :album , :allow_destroy => true
end

模型/album.rb

class Album < ActiveRecord::Base
  attr_accessible :album_name, :artist,  :year, :tracks_attributes

  validates :album_name, :artist, :presence => true
  validates :year, :numericality => { :only_integer => true }

  belongs_to :album_review_proposal
  has_many :tracks
  accepts_nested_attributes_for :tracks, :allow_destroy => true
end

模型/track.rb

class Track < ActiveRecord::Base
  attr_accessible :track_name, :track_number

  validates :track_name, :track_number,  :presence => true

  belongs_to :album
end

views/album_review_proposals/_form.html.erb

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

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

    <%= f.fields_for :album do |album| %>
        <div class="field">
          <%= album.label :album_name %><br />
          <%= album.text_field :album_name %>
        </div>
        <div class="field">
          <%= album.label :artist %><br />
          <%= album.text_field :artist %>
        </div>
        <div class="field">
          <%= album.label :year %><br />
          <%= album.text_field :year %>
        </div>

        <div class="field">
          <%= f.label :description %><br />
          <%= f.text_area :description %>
        </div>

        <legend>Tracks</legend>
        <table>
            <th>#</th>
            <th>Name</th>
            <th></th>

            <%= album.fields_for :tracks do |track|  %>
            <tr>
            <div  class="fields">
                <td><%= track.text_field :track_number, :size => 2 %></td>
                <td><%= track.text_field :track_name, :size => 50 %> </td>

              <td><%= track.hidden_field :_destroy %></td>
                <td><%= link_to_remove_fields "remove", track   %></td>
            </div>
            </tr>
            <% end %>
        </table>

    <% end %>

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

controllers/album_review_proposals.controller.rb(仅来自脚手架的修改方法)

  def new
    @album_review_proposal = AlbumReviewProposal.new

    @album = @album_review_proposal.build_album

    4.times { @album.tracks.build }

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

application.js

//= require jquery
//= require jquery_ujs
//= require_tree .

function remove_fields(link) {
    $(link).prev("input[type=hidden]").val("1");
    $(link).closest(".fields").hide();
}

function add_fields(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g")
    $(link).parent().before(content.replace(regexp, new_id));
}

application_helper.rb

module ApplicationHelper
  def link_to_remove_fields(name, f)
    f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
  end

  def link_to_add_fields(name, f, association)
    new_object = f.object.class.reflect_on_association(association).klass.new
    fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
      render(association.to_s.singularize + "_fields", :f => builder)
    end
    link_to_function(name, "add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")")
  end


end

我要删除的 HTML 的 HTML 部分

 <legend>Tracks</legend>
        <table>
          <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th></th>
          </tr>
          </thead>
          <tbody>

            <div class="fields">
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_0_track_number" name="album_review_proposal[album_attributes][tracks_attributes][0][track_number]" size="2" type="text" /></td>
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_0_track_name" name="album_review_proposal[album_attributes][tracks_attributes][0][track_name]" size="50" type="text" /></td>
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_0__destroy" name="album_review_proposal[album_attributes][tracks_attributes][0][_destroy]" type="hidden" value="false" /><a href="#" onclick="remove_fields(this); return false;">remove</a></td>
            </tr>

            <div class="fields">
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_1_track_number" name="album_review_proposal[album_attributes][tracks_attributes][1][track_number]" size="2" type="text" /></td>
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_1_track_name" name="album_review_proposal[album_attributes][tracks_attributes][1][track_name]" size="50" type="text" /></td>
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_1__destroy" name="album_review_proposal[album_attributes][tracks_attributes][1][_destroy]" type="hidden" value="false" /><a href="#" onclick="remove_fields(this); return false;">remove</a></td>
            </tr>

            <div class="fields">
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_2_track_number" name="album_review_proposal[album_attributes][tracks_attributes][2][track_number]" size="2" type="text" /></td>
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_2_track_name" name="album_review_proposal[album_attributes][tracks_attributes][2][track_name]" size="50" type="text" /></td>
              <td><input id="album_review_proposal_album_attributes_tracks_attributes_2__destroy" name="album_review_proposal[album_attributes][tracks_attributes][2][_destroy]" type="hidden" value="false" /><a href="#" onclick="remove_fields(this); return false;">remove</a></td>
            </tr>

            <!-- repeat 3 times... -->
            </tr>
          </tbody>
        </table>

Answer 1

在您看来，在 views/album_review_proposals/_form.html.erb 中，不要将类 fields 添加到每个字段内的 div轨道的tr，将其直接添加到tr。问题在于，当添加到表格行内时，div 的行为不符合预期。