Question

我正在开发一个页面，用户可以创建新的产品。

每个产品都有产品型号，其中包含:id，:name，:description等字段。

在此产品页面中，我有一个<select>，用户可以在其中选择产品型号。我想要做的是，当用户选择产品型号时，页面应该更新，显示所选的产品型号详细信息。

怎么能这样做？

Answer 1

使用javascript（基于选择更改）可以执行的操作的示例：

首先为ProductModel自定义方法定义集合路线。我们称之为find：

resources :product_models do
  get 'find', on: :collection  #=>output: /product_models/find/:id
end

在ProductModelsController中，find方法会响应js格式：

def find
  @product_model = ProductModel.find(params[:id])
  respond_to { |format| format.js }
end

假设您拥有jQuery，在application.js（或您想要的其他自定义js文件）中，创建ajax调用以查找product_model：

$(document).on('turbolinks:load', function() {
  $('#product_product_model_id').on('change', function(){ //<-- the id selector is returned by simple_form
    $.ajax({
      type: "GET",
      url: "/product_models/find/?id=" + $(this).val(),
      success: function(data) {
      },
      error: function(jqXHR) {
        console.error(jqXHR.responseText);
      }
    })
  })
})

在您的Product新视图中，在您的表单下，渲染部分名称，例如＆＃34; selected_product_model＆＃34;：

#new.html.erb
<% simple_form_for @product do |f| %>
  #... the form
  f.association :product_model
<% end %>

<div>
  <%= render partial: 'selected_product_model' %>
</div>

在partial中，创建将显示数据的html选择器：

#_selected_product_model.html.erb
<p id="pm-id"></p>
<p id="pm-name"></p>
<p id="pm-desc"></p>

然后创建您的find.js.erb文件（在视图＆gt; product_models文件夹中）以更新部分选择更改：

# @product_model comes from the controller find#product_models
$('#pm-id').html("ID: <%= j @product_model.id.to_s %>")
$('#pm-name').html("Name: <%= j @product_model.name %>")
$('#pm-desc').html("Description: <%= j @product_model.description %>")

当然，它只是您在rails中使用ajax可以执行的操作的基本示例，您可以自定义显示数据的方式或添加一些条件以防止错误。

Rails动态表单 - 使用SimpleForm参数调用控制器来更新页面

1 个答案: