javascript - Rails 4 jQuery/Ajax 在创建后刷新并将项目添加到部分

Question

我有一个包含 2 个嵌套表单的表单。一旦使用第一个表单创建一个插入到第二个表单中的对象，我就尝试刷新第二个嵌套表单。

我的ajax正在努力能够创建和保存我的order_item，它是由我的第一个f.fields_for :order_item创建的，但我不知道如何让我的部分刷新位于另一个 Controller 中。

这是我的家长表格

<div class-"col-md-12">
<%= bootstrap_form_for(@quote) do |f| %>
<% if @quote.errors.any? %>
<div id="error_explanation">
    <h2><%= pluralize(@quote.errors.count, "error") %> prohibited this quote from being saved:</h2>

    <ul>
        <% @quote.errors.full_messages.each do |message| %>
        <li><%= message %></li>
        <% end %>
    </ul>
</div>
<% end %>
<%= f.hidden_field :quote_num, value:@current_user.company.starting_quote %>
<fieldset>
    <div class-"col-md-12">
        <div class="col-md-8">
            <%= f.collection_select :client_id, Client.order(:business_name), :id, :business_name, include_blank: true %>
        </div>
        <div class="col-md-4">
            <%= f.date_select :quote_exp, :order => [:month, :day, :year] %>
        </div>
        <div class="margin-bottom-10"></div>
        <div class="col-md-6">
            <%= f.grouped_collection_select :billing_address, Client.order(:business_name), :addresses, :business_name, :full_address, :full_address, include_blank: true %>
        </div>
        <div class="col-md-6">
            <%= f.grouped_collection_select :shipping_address, Client.order(:business_name), :addresses, :business_name, :full_address, :full_address, include_blank: true %>
        </div>
    </div>
</fieldset>
<div class="margin-bottom-10"></div>
<hr />
<div class="margin-bottom-10"></div>

<!-- Render Select Options for New Item -->
<div class="col-md-12">
    <%= f.fields_for :order_item do |ff| %>
    <div class="col-md-4">
        <%= ff.hidden_field :quote_id, value: @quote.id %>
        <%= ff.collection_select :category_id, Category.order(:name), :id, :name, include_blank: "Select Category", hide_label: true %>
    </div>
    <div class="col-md-6">
        <%= ff.grouped_collection_select :product_id, Category.order(:name), :products, :name, :id, :name, include_blank: true, hide_label: true %>
    </div>
    <div class="col-md-2">
        <%= ff.submit "Add Item", class:"btn-u btn-u-blue pull-right", id:"add_item" %>
    </div>
    <% end %>
</div>

<div class="margin-bottom-10"></div>
<hr />
<div class="margin-bottom-10"></div>
<div class="table-search-v1 margin-bottom-20">
    <div class="table-responsive">
        <table class="table table-hover table-bordered table-striped table-condensed">
            <thead>
                <th style="width: 20px;"></th>
                <th style="width: 300px;">Product</th>
                <th>Price</th>
                <th style="width: 20px;">Quantity</th>
                <th>Discounts</th>
                <th>Total</th>
            </thead>
            <tbody id="list">
                <!-- this is where we display the results -->
                <%= f.fields_for :order_items do |builder| %>
                    <%= render 'order_item_fields', f: builder, show_total: true %>
                <% end %>

            </tbody>
        </table>

    </div>
</div>
</div>
<div class="margin-bottom-10"></div>
<hr />
<div class="margin-bottom-10"></div>
<fieldset>

    <div class="col-md-12">
        <div class="col-md-6">
            <%= f.text_area :special_note, rows:7, label:"Special Notes" %>
        </div>
        <div class="col-md-6">
            <div id="total_deposit">
            </div>
            <div class="col-md-4">
                <h5>Sales Tax</h5>
            </div>
            <div class="col-md-8">
                <%= f.text_field :tax_amount, hide_label: true %>
            </div>
            <div class="col-md-4">
                <h5>Sub-Total</h5>
            </div>
            <div class="col-md-8">
                <%= f.text_field :sub_total, hide_label: true %>
            </div>
            <div class="col-md-4">
                <h5>Shipping</h5>
            </div>
            <div class="col-md-8">
                <%= f.text_field :shipping_cost, hide_label: true %>
            </div>
            <div class="col-md-4">
                <h5>Total</h5>
            </div>
            <div class="col-md-8">
                <%= f.text_field :total, hide_label: true %>
            </div>
        </div>
    </div>
</fieldset>
<div class="margin-bottom-10"></div>
<hr />
<div class="margin-bottom-10"></div>
<div class="tag-box tag-box-v1 box-shadow shadow-effect-1 col-md-12">
    <h4>Deposit</h4>
    <%= f.check_box :deposit, label: "Require Deposit" %>
    <%= f.text_field :deposit_amount, hide_label: true, placeholder:"Enter Amount" %>
</div>
<div class="margin-bottom-10"></div>
<div class="tag-box tag-box-v1 box-shadow shadow-effect-1 col-md-12">
    <h4>Shipping Information</h4>
    <div class="col-md-6">
        <select class="form-control" id="shipping">
            <option value="0" selected="selected">Not Applicable</option>
            <option>Overnight Shipping</option>
            <option>2 Day Shipping</option>
            <option>3 Day Shipping</option>
            <option>Ground (5-7 days)</option>
        </select>
    </div>
    <div class="col-md-6">
        <%= f.text_field :shipping_cost, hide_label: true, placeholder:"Enter Amount" %>
    </div>
</div>
<div class="actions">
    <%= f.submit "Save Quote", class:"btn-u pull-right" %>
</div>
<% end %>
</div>
<script>
$("#quote_deposit").change(function(){
    $("#quote_deposit_amount").toggle($(this).is(':checked'));
});

$('#quote_deposit').trigger('change');

var product = $("#quote_product_id").val()

</script>

这是我的嵌套表单，它在主表单的表格中按行显示。这是创建后应刷新的部分，以显示现在与报价关联的所有项目。如果可能的话，我想只添加元素并使用js，以免刷新整个部分。

<fieldset>
<tr>
    <td>
        <div class="btn-group">
            <button type="button" class="btn-u dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-angle-down"></i>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><%= f.hidden_field :_destroy %>
                <%= link_to "Remove Item", '#', class: "remove_fields btn btn-link" %></li>
                <li><button class="btn btn-link">Add Custom Item</button></li>
                <li><button class="btn btn-link">Remove Item</button></li>
            </ul>
        </div>
    </td>
    <td>
        <h5><%= f.object.product.name %></h5>
    </td>
    <td>
        <h5 class="text-right"><span style="color: green"> <%= number_to_currency f.object.unit_price %></span></h5>
    </td>
    <td>
        <%= f.number_field :quantity, min: 1, hide_label: true %>
        <%= f.hidden_field :_destroy %>
    </td>
    <td>
        <%= f.text_field :discount, hide_label: true %>
    </td>
    <td>
        <h5 class="text-right"><span style="color: green"><%= number_to_currency f.object.total_price %></span></h5>
    </td>
</tr>
</fieldset>

我的 jquery ajax 调用来创建对象

$('form').on 'click', '#add_item', (e) ->
e.preventDefault()
product = $('#quote_order_item_product_id :selected').val()
quote = $('#quote_order_item_quote_id').val()
console.log(product)
console.log(quote)
$.ajax '/order_items',
  type: 'POST'
  dataType: 'json'
  data: { order_item: { product_id: product, quote_id: quote } }
  success:(data) ->
    alert data.id
  error: (jqXHR, textStatus, errorThrown) ->
    alert textStatus

以及我的订单项创建方法

def create
@order_item = OrderItem.new(order_item_params)
 respond_to do |format|
   if @order_item.save
     format.js do
        render 'quotes/' + @quote.id + '/refresh'
     end
   else
     format.json { render json: @order_item.errors, status: :unprocessable_entity }
   end
  end
 end

Answer 1

从 quote:id/order_item 创建正确的路线后，我编辑 Controller 以仅在成功时返回 js (或 json，无关紧要)。然后我将 jquery Coffeescript 方法更改为如下所示。

$('form').on 'click', '#add_item', (e) ->
e.preventDefault()
product = $('#quote_order_item_product_id :selected').val()
product_name = $('#quote_order_item_product_id :selected').text()
console.log(product_name)
count = $('.order-item').length
console.log(count)
quote = $('#quote_order_item_quote_id').val()
console.log(product)
console.log(quote)
$.ajax '/order_items',
  type: 'POST'
  dataType: 'json'
  data: { order_item: { product_id: product, quote_id: quote } }
  success:(data) ->
    id = data.id.toString()
    $root = $('.order-item:last').clone()

    $root.find(".remove_fields").attr('name',"quote[order_items_attributes][#{count}][_destroy]" )
    $root.find(".remove_fields").attr('id',"quote_order_items_attributes_#{count}__destroy]" )
    $root.find(".product").text(product_name)
    $root.find(".product-id").attr('value', product)
    $root.find(".price").text(data.unit_price)
    $root.find(".quantity_input").val("1")
    $root.find(".discount_input").val("")
    $root.find(".quantity_input").attr('name',"quote[order_items_attributes][#{count}][quantity]" )
    $root.find(".quantity_input").attr('id',"quote_order_items_attributes_#{count}_quantity]" )
    $root.find(".discount_input").attr('name',"quote[order_items_attributes][#{count}][discount]" )
    $root.find(".discount_input").attr('id',"quote_order_items_attributes_#{count}_discount]" )

    $root.appendTo('#list')

  error: (jqXHR, textStatus, errorThrown) ->
    alert textStatus

本质上，我所做的就是成功，我将对象作为(数据)返回，然后克隆前一个表行并使用所有正确的输入值在客户端重建我的表单。我确信你可以通过 javascript 构建它，但我的表单非常复杂而且很长，所以无论你相信与否，这是捷径。