Question

我有一个REQUEST表单，其中有许多CATEGORIES，CATEGORY有很多产品。我让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时显示product.description的静态文本。

同时，我想根据所选的PRODUCT显示自定义表单部分。例如，如果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 }
  });
});

<强>配置/ 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>
...

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

1 个答案: