0

多くのカテゴリーを含む REQUEST フォームがあり、CATEGORY には多くの製品があります。CATEGORY の選択に基づいて PRDOUCTS を作成するために jQuery を使用しています。

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 %>
4

1 に答える 1

0

製品フォームを部分的にレンダリングするには、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') %>");

divjQuery セレクターが簡単に機能するように、ターゲットを一意に識別するものを追加する必要があります。たとえば、属性を追加でき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>
...
于 2013-07-23T15:43:02.467 に答える