Question

我正在使用Carmen和carmen-rails来建立一个由ajax驱动的select-a-country，states-list-populate设置。我或多或少地使用代码right from their demo，它的效果非常好。

除了：我想在几种形式中重复使用我的“地址”部分：订单表格，更新你的地址表格，更新客户地址表格，那种东西。每个视图中的代码都相同。

该示例硬编码状态元素的名称，这对我不起作用。如果我在没有AJAX的情况下渲染它，我可以简单地将FormBuilder传递给partial，但这不是一个选项。

这是我的部分代码：

<li>
  <label for="country">Country</label>
  <div class="select-wrapper">
    <%= address.country_select :country, {priority: %w(US CA GB), prompt: 'Please select a country'}, class: 'country-select' %>
  </div>
</li>
<li>
  <% if address.object.has_attribute? :address %>
    <%= address.label :address, 'Address' %>
    <%= address.text_field :address %>
  <% else %>
    <%= address.label :street, 'Street' %>
    <%= address.text_field :street %>
  <% end -%>
</li>
<li>
  <%= address.label :city, 'City' %>
  <%= address.text_field :city %>
</li>
<li>
  <label for="province">Province/State</label>
  <div class="select-wrapper">
    <%= render partial: 'shared/subregion_select', locals: { parent_region: address.object.country } %>
  </div>
</li>
<li>
  <%= address.label :zip, 'Postal Code' %>
  <%= address.text_field :zip %>
</li>

这是部分：

<div id="state_code_wrapper">
  <% parent_region ||= params[:parent_region] %>
  <% country = Carmen::Country.coded(parent_region) %>

  <% if country.nil? %>
    <em>Please select a country.</em>
  <% elsif country.subregions? %>
    <%= subregion_select(:order, :state_code, parent_region) %>
  <% else %>
    <%= text_field(:order, :state_code) %>
  <% end %>
</div>

问题是subregion_select(:order, :state, parent_region) - ：需要调整顺序以支持FormBuilder创建的任何内容。理想情况下，我希望它是f.subregion_select，但我不知道通过AJAX为f传递什么。

Answer 1

这不是解决问题的真正的解决方案，而是一种解决方法（并且可以说是＆＃34;正确的＆＃34;方法）。我已经更改了ajax调用以将子区域作为JSON获取，并使用jQuery清除并重建select标记中的项目。

以下是重点。它不是最干净的代码，并且有一些警告：

它没有处理多个地址的情况
如果没有要选择的项目

对于我的用例，这没关系，但您可能需要做其他事情。

subregion_options.json.jbuilder：

json.array! @country.subregions do |region|
  json.name region.name
  json.code region.code
end

addresses.js.coffee：

$ ->
  $('select.country-select').change (event) ->
    $country_select = $(this)
    $country_select.attr 'disabled', true

    $region_select = $('select.region-select').first()

    country_code = $(this).val()
    url = "/lookup/subregion_options.json?parent_region=#{country_code}"

    $.getJSON url, (data) ->
      $region_select.find('option').remove()
      $.each data, (index, value) ->
        $region_select.append '<option value=' + value.code + '>' + value.name + '</option>'
      $country_select.attr 'disabled', false

在多个表单和AJAX中重用部分FormBuilder元素

1 个答案:

subregion_options.json.jbuilder：

addresses.js.coffee：