2

我试图弄清楚如何使用 Jquery 在我的 Rails 3 应用程序中添加和删除一组字段。我让 jquery 脚本使用纯 html，你可以在这里看到：http: //jsfiddle.net/beehive/ABvFH/1/

但是，我不知道如何将其转换为 Rails 3。更具体地说，我应该在 application.js 文件中用什么替换“formfield”才能使其正常工作？

应用程序.js

$(document).ready(function() {

    $(function() {
        var x = $('#uploadform');
        var i = $('#uploadform ul').size() + 1;

        $('#addmore').live('click', function() {
            if ($(".item", x).length < 9) {
                $('<ul class="item" class="field">formfield ' + i + ' <a href="#" id="remfields">Remove</a></p>').appendTo(x);
                i++;
            }
            return false;
        });

        $('#remfields').live('click', function() {
            if (i > 2) {
                $(this).parents('ul').remove();
                i--;
            }
            return false;
        });
    });​


});

form.html.erb

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

      <ul>
      <% @upload.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <h2><a href="#" id="addmore">Add More Fields</a></h2>
  <div id="uploadform">
    <ul class="field">
      <li>
        <%= f.label :title %><br />
        <%= f.text_field :title %>
      </li>
      <li>
        <%= f.label :genre %><br />
        <%= f.collection_select :genre, Upload::GENRES, :to_s, :to_s, :include_blank => true %>
      </li>
      <li>
        <%= f.label :category %><br />
        <%= f.collection_select :category, Upload::CATEGORIES, :to_s, :to_s, :include_blank => true %>
      </li>
      <li>
        <%= f.label :age %><br />
        <%= f.collection_select :age, Upload::AGES, :to_s, :to_s, :include_blank => true %>
      </li>
    </ul>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>
4

2 回答 2

0

我猜你想允许用户在提交表单之前添加许多上传。在那种情况下，我使用的是 rails嵌套属性。

这是示例。订单有很多照片

订购型号：

class Order < ActiveRecord::Base
  has_many :photos, :dependent=>:destroy, :inverse_of=>:order
  accepts_nested_attributes_for :photos, :allow_destroy=>true,:reject_if=> :all_blank
end

照片模型：

class Photo < ActiveRecord::Base
  has_attached_file :photo
  belongs_to :order
end

订购单视图：

<%= form_for @order, :html => {:autocomplete => :off, :multipart => true} do |f| %>
    <%= f.label :title %><br />
    <%= f.text_field :title %>
    <h3>Order photos</h3>
        <%= f.fields_for :photos do |photo| %>
        <%= render :partial=>'photo_form', :object=> photo, :as => :f %>
        <% end %>
    <%= link_to 'Add photo', new_photo_path, :remote=>true, :id=>'add_photo'  %>
    <%= f.submit%>
<% end %>

photo_form 部分：

<fieldset class="photo" data-status="<%= f.object.persisted? ? 'db':'new' %>">
   <% if f.object.persisted? %>
      <div class="field">
    <label>Photo:</label><br />
    <%= link_to f.object.photo.url, :target=>'_blank' do %><%= image_tag f.object.photo.url(:mini) %><% end %>
      </div>
   <% else %>
      <%= f.label :photo
      <%= f.file_field :photo %>
      <%= f.text_field :description %>
  <%= f.check_box :_destroy, :class=>'delete' %>
</fieldset>

现在在您的控制器中，您需要 3 个操作来编辑带有照片的订单：编辑、更新、添加照片（用户单击添加照片链接时的 ajax 操作）：

class OrdersController < ApplicationController
  def edit
    @order = Order.find(params[:id])
  end

  # Action responsible for updating existing order record
  def update
    @order = Order.find(params[:id])
    if @order.update_attributes(params[:order])
       redirect_to @order, :notice=>'Order updated'
    else
       render :action => "edit" #save error, display order form with errors
    end
  end

  # Action responsible for creating nested form for order photo
  def new_photo
    #nothing just renders 'new_photo.js.erb'
  end
end

new_photo.js.erb：

$object=$("<%= escape_javascript( render(:partial => "photo_form", :locals=>{
    :f=>FormBuilder.new("order[photos_attributes][#{rand(400000)}]",Photo.new(),self,{},proc {})
}) ) %>").hide();  //generates new photo view
$object.insertBefore("a#add_photo").slideDown(500);

这只是示例，但在您的应用程序中采用它应该没有问题。

于 2012-07-11T19:34:22.440 回答
0

我所要做的就是发表评论$(function() {

$(document).ready(function() {

    //$(function() {
        var x = $('#uploadform');
        var i = $('#uploadform ul').size() + 1;

        $('#addmore').live('click', function() {
            if ($(".item", x).length < 9) {
                $('<ul class="item" class="field">formfield ' + i + ' <a href="#" id="remfields">Remove</a></p>').appendTo(x);
                i++;
            }
            return false;
        });

        $('#remfields').live('click', function() {
            if (i > 2) {
                $(this).parents('ul').remove();
                i--;
            }
            return false;
        });
    //});​


});

编辑：

插入它们是什么意思？

要访问元素，您可以使用

    $('#uploadform > ul').each(function(index) {
        alert(index + ': ' + $(this).text());
    });

注意您生成的 HTML。您正在为每个 li （列表项）创建 ul （无序列表）。您可能希望将其修复为仅附加列表项。

于 2012-07-11T18:59:04.977 回答