3

うまくいけば、より明確になるようにリクエストを編集しました。以前の選択ボックスに基づいて動的にパーシャルをレンダリングする必要があります。

REQUEST は PRODUCT に属しています

PRODUCT は CATEGORY に属しています

CATEGORYには多くの製品があります

PRODUCT には多くの REQUESTS があります

ユーザー ヒット フォーム: create_request.html.erb

ユーザーがカテゴリを選択すると、製品の選択リストが表示されます (Railscast 88 のような動的選択ボックス)。

ここで必要なのは、選択された製品に基づいてさまざまな部分形式をレンダリングすることです。私はjqueryが苦手です。

create_request.html.erb:

<%= javascript_include_tag "dynamic_products.js" %>

<% form_for :request, :url => {:controller => :requests, :action => :create_request, :id => params[:id]} do |f| %>

  <label>Select Category:</label>
  <%= select( "request", "category_id", Category.find( :all).collect { |c| [c.name, c.id] })%></br>

  <div id="product_field">
   <label>Select Product</label>
   <%= select( "request", "product_id", Product.find( :all).collect { |p| [p.name, p.id] })%></br>
  </div>


  ####  and here is where I need help:
  ####  if request.product_id = 1, render partial _form1
  ####  if request.product_id = 2, render partial _form2

  <button  type="submit">Submit</button>

<% end %>

dynamic_products.js.erb:

var products = new Array();

<% for product in @products -%>
  products.push(new Array(<%= product.category_id %>, '<%=h product.name %>', <%= product.id %>, <%= product.active %>));
  products.sort()
<% end -%>



function categorySelected() {
  category_id = $('request_category_id').getValue();
  options = $('request_product_id').options;
  options.length = 1;
  products.each(function(product) {
    if (product[0] == category_id && product[3] == 1) {
      options[options.length] = new Option(product[1], product[2]);
    }
  });
  if (options.length == 1) {
    $('product_field').hide();
  } else {
    $('product_field').show();
  }
}


document.observe('dom:loaded', function() {
  categorySelected();
  $('request_category_id').observe('change', categorySelected);
});
4

1 に答える 1

5

始める前に、最初に 1 つのリマインダーです。これについてはよくわかりませんがrequest、レールの予約語だと思います。

JS

これはドロップダウンを観察し、ajax 呼び出しを実行するだけです

$(document).ready(function() {
  $('#request_product_id').change(function() {
    $.ajax({ url: '/products/' + this.value + '/form_partial' });
  });
});

ルート

ここでも空想は何もありません。トリガーされたときにajaxが移動するルートを設定するだけです

resources :products do
  get :form_partial, on: :member
end

コントローラ

:idajaxから渡された製品を取得するだけです

def form_partial
  @product = Product.find params[:id]
end

JS テンプレート

form_partial.js.erb製品に応じてパーシャルをレンダリングするを作成する必要があります。product_field以下のコードは、 divの後にパーシャルを追加します

 # app/views/products/form_partial.js.erb
 $('#product_partial').remove();
 <% if @product.id == 1 %>
   $('#product_field').after('<div id="product_partial"><%= escape_javascript render('partial1') %></div>');
 <% else %>
   $('#product_field').after('<div id="product_partial"><%= escape_javascript render('partial2') %></div>');
 <% end %>

更新: レール 2.x の場合

これを Rails 2.x で実行するには、ルートと js テンプレートを変更するだけです。

ルート 2.x

map.resources :products, member: { form_partial: :get }

JS テンプレート 2.x

私の記憶が正しければ、ファイルの名前はform_partial.js.rjs. これによりpage、js を追加するために使用できる変数が得られます。

 # app/views/products/form_partial.js.rjs
 page << "$('#product_partial').remove();"
 page << "<% if @product.id == 1 %>"
 page << "  $('#product_field').after('<div id="product_partial"><%= escape_javascript render('partial1') %></div>');"
 page << "<% else %>"
 page << "  $('#product_field').after('<div id="product_partial"><%= escape_javascript render('partial2') %></div>');"
 page << "<% end %>"
于 2013-02-06T08:33:03.223 に答える