Rails App - jQuery 在动态选择时显示静态文本

Question

我有一个包含许多类别的请求表单，而类别包含许多产品。我让 jQuery 根据 CATEGORY 选择填充 PRDOUCTS：

requests.js.coffee：

jQuery ->
    $('#request_product_id').parent().hide()
    products = $('#request_product_id').html()
    console.log(products)
    $('#request_category_id').change ->
        category = $('#request_category_id :selected').text()
        options = $(products).filter("optgroup[label='#{category}']").html()
        console.log(options)
        if options
            $('#request_product_id').html(options)
            $('#request_product_id').parent().show()
        else
            $('#request_product_id').empty()
            $('#request_product_id').parent().hide()

现在我希望在选择产品时显示 product.description 的静态文本。

同时，我想根据所选产品显示自定义表单部分显示。例如，如果 product.id = 1，则渲染 _product1.html.erb 或.... 只需根据 product.id 切换 DIV 以显示适当的字段。

这是我的完整 _form.html.erb：

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

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

  <div class="field">
    <%= f.label :category_id, "Select a Category:" %>
    <%= f.collection_select(:category_id, Category.sorted, :id, :name, :include_blank => true ) %>
  </div>

  <!--  BASED ON CATEGORY SELECTED ABOVE, LOAD CORRESPONDING PRODUCTS BELOW -->

  <div class="field">
    <%= f.label :product_id, "Select a Product/Service:" %>
    <%= f.grouped_collection_select :product_id, Category.sorted, :products, :name, :id, :name, include_blank: true %>
  </div>

  <!-- ALL OF THE ABOVE WORKS FINE... NOW....  -->
  <!--  BASED ON PRODUCT SELECTED ABOVE, LOAD CORRESPONDING PRODUCT DESCRIPTION AND CORRESPONDING FORM -->

  <div class="field">
    ::::  THIS WILL AUTO POPULATE WITH THE ABOVE-SELECTED PRODUCT.DESCRIPTION  ::::
  </div>

  <p></p>

  <div>
    <p>:::: BASED ON PRODUCT.ID, HIDE/SHOW SPECIFIC DIVS HERE. IF PRODUCT.ID IS NOT SPECIAL, DO NOT SHOW ANYTHING HERE</p>
  </div>

  <!--  THEN, NO MATTER WHAT THE PRODUCT.ID IS, THERE WILL BE A REQUESTOR_NOTE FOR FURTHER INFO -->

    <div class="field">
    <%= f.label :requestor_note, "Please give full details below..." %>
    <%= f.text_area :requestor_note, :size => "50x6" %>
  </div>

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

Answer 1

我认为您需要添加一个 ajax 调用来呈现您的产品表单部分，如下所示应该可以工作（未经测试）。请注意，名称是编造的。使用以下内容，您不必拥有多个 _product_form 部分，这更好，因为您不必为添加到系统中的每个新产品定义新的部分（不知道您为什么决定走这条路线，即添加每个产品的部分）。

$('#request_product_id').on('change', function(evt) {
  selected_product_id = $(this).val();
  $.ajax({
    url: 'my_controller/product_form',  //Note the my_controller and action here, i.e. change accordingly
    type: 'get', 
    data: { 'product_id=' + selected_product_id }
  });
});

config/routes.rb

get 'my_controller/product_form/:product_id', to: 'my_controller#product_form', constraints: { product_form: /\d+/ }

my_controller.rb

def product_form 
    @product = Product.find(params[:product_id])

    respond_to do |format|
        format.js
    end
end

product_form.js.erb

var target = $('#my_target_field'); // See notes below
target.html("<%= j render('_product_form') %>");

您需要添加一些唯一标识目标div 的内容，以便jQuery 选择器可以轻松工作。您可以添加 id 属性，例如（在您的 _form.html.erb 中）：

<div id="my_target_field" class="field">
  ::::  THIS WILL AUTO POPULATE WITH THE ABOVE-SELECTED PRODUCT DESCRIPTION  ::::
</div>

_product_form.html.erb

<div class="my_static_text_field"><%=@product.product_description %></div>
...