基于选择框的动态部分 - Rails 2.3.5 [英] Dynamic Partial Based on Select Box - Rails 2.3.5

问题描述

我已经编辑了我的请求，希望能更清楚.我需要根据之前的选择框动态呈现部分.

请求属于产品

产品属于类别

CATEGORY 有很多产品

产品有很多请求

用户点击表单:create_request.html.erb

用户选择一个类别，然后填充产品选择列表(如 Railscast 88 - 动态选择框)

我现在需要的是根据选择的产品呈现不同的部分形式.我不擅长 jquery.

create_request.html.erb:

<%= javascript_include_tag "dynamic_products.js" %><% form_for :request, :url =>{:控制器=>:requests, :action =>:create_request, :id =>参数[:id]} 做 |f|％＞<label>选择类别:</label><%= select( "request", "category_id", Category.find( :all).collect { |c| [c.name, c.id] })%></br><div id="product_field"><label>选择产品</label><%= select( "request", "product_id", Product.find( :all).collect { |p| [p.name, p.id] })%></br>

#### 这里是我需要帮助的地方:#### 如果 request.product_id = 1，渲染部分 _form1#### 如果 request.product_id = 2，渲染部分 _form2<button type="submit">提交</button><%结束%>

dynamic_products.js.erb:

var products = new Array();<@products 中产品的% -%>products.push(new Array(<%= product.category_id %>, '<%=h product.name %>', <%= product.id %>, <%= product.active%＞));产品排序()<%结束-%>功能类别选择(){category_id = $('request_category_id').getValue();options = $('request_product_id').options;options.length = 1;products.each(功能(产品){if (product[0] == category_id && product[3] == 1) {options[options.length] = new Option(product[1], product[2]);}});如果(选项.长度== 1){$('product_field').hide();} 别的 {$('product_field').show();}}document.observe('dom:loaded', function() {类别选择()；$('request_category_id').observe('change', categorySelected);});

解决方案

在开始之前先提醒一下.我对此不确定，但我认为 request 是 Rails 中的保留字.

JS

这只是观察下拉列表并执行ajax调用

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

路线

这里也没什么好看的.只是设置一个 ajax 被触发时会去的路由

resources :products do获取:form_partial，在::成员结尾

控制器

我们只是使用从 ajax 传递过来的 :id 获取产品

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

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>');<%其他%>$('#product_field').after('<div id="product_partial"><%=escape_javascript render('partial2') %></div>');<%结束%>

更新:适用于 rails 2.x

我们只需要更改路由和 js 模板，即可在 rails 2.x 上运行

路线 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页面<<"$('#product_partial').remove();"页面<<"<% if @product.id == 1 %>"页面<<" $('#product_field').after('<div id="product_partial"><%=escape_javascript render('partial1') %></div>');"页面<<<% 其他 %>"页面<<" $('#product_field').after('<div id="product_partial"><%=escape_javascript render('partial2') %></div>');"页面<<<%结束%>"

I've edited my request to hopefully be clearer. I need to render a partial dynamically based on a previous selection box.

REQUEST belongs to PRODUCT

PRODUCT belongs to CATEGORY

CATEGORY has many PRODUCTS

PRODUCT has many REQUESTS

User hits form: create_request.html.erb

User selects a category, then the products select list is populated (like Railscast 88 - dynamic select boxes)

What I now need is to render different partial forms based on which product is selected. I suck at 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);
});

解决方案

one reminder first before we start. I'm not sure about this but I think request is a reserved word in rails.

JS

this just observes the dropdown and performs an ajax call

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

ROUTES

nothing fancy here either. Just setting up a route where the ajax will go to when it is triggered

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

CONTROLLER

we just fetch the product using :id which is passed from ajax

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

JS TEMPLATE

you need to create a form_partial.js.erb which will render the partial depending on the product. The code below appends the partial after the 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 %>

UPDATE: for rails 2.x

we just need to change the routes and the js template in order for this to run on rails 2.x

ROUTES 2.x

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

JS TEMPLATE 2.x

if I remember correctly, the file should be named form_partial.js.rjs. This will give you a page variable which you can use to add 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 %>"

这篇关于基于选择框的动态部分 - Rails 2.3.5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！