4

Listing非常に多くの属性 (25 など) を持つモデル ( ) があります。

フォームの入力に基づいて動的な AJAX フォームを作成したいと思います。

つまり、ユーザーが を選択するtype=bと、表示されるべきではないフィールドではなく、表示されるべき他のフィールドが表示されます。

理想的には、データベースからの適切なコンテンツ、つまり AJAXy の方法で、すぐにロードする必要があります。

これにアプローチする最良の方法は何ですか？

ありがとう。

編集：これは私の例です_form.html.erb。選択した値が指定された値のいずれifかである場合に表示するフィールドを示す2 つのステートメントが含まれていることに気付くでしょう。property_type

<%= simple_form_for(@listing) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :headline %>
    <%= f.input :price %>    
    <%= f.association :property_type %>

    If property_type == "coop"

    <%= f.input :maintenance %>
    <%= f.input :coop_deductible %>
    <%= f.input :flip_tax %>

    if property_type == "condo"

    <%= f.input :common_charges %>
    <%= f.input :taxes %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

編集2：

これは、私が使用した Rails フォーム ヘルパーです。gem Simple_Form を利用しています。

<%= simple_form_for @listing, :defaults => { :wrapper_html => { :class => 'form-horizontal' } } do |f| %>
  <%= f.error_notification %>
  <fieldset>
    <%= f.association :listing_category, :label => "Category: ", :label_html => { :class => "control-label"}, :wrapper_html => { :class => "controls"} %>

    <div style="display: none;" data-show-for="Exclusive">
        <%= f.association :listing_type %>
      <%= f.association :user %>
      <%= f.association :boro %>
    </div>

    <div style="display: none;" data-show-for="Open">
      <%= f.association :neighborhood %>    
      <%= f.association :building %>
      <%= f.association :term %>
      <%= f.association :property_type %>
    </div>

    <div class="form-actions">
    <%= f.button :submit, :class => "btn btn-primary" %>
    <!-- <button type="submit" class="btn btn-primary">Save and Continue</button>
    <button type="reset" class="btn">Cancel</button> -->
    </div>
  </fieldset>

  <% end %>

これは、生成された HTML です。

<form accept-charset="UTF-8" action="/listings" class="simple_form new_listing" id="new_listing" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="1oDfg41Wx/SiPCsvf4qTAcxhFUGSNlhlLfkMy8nHW1E=" /></div>

              <fieldset>
                <div class="control-group select optional controls"><label class="select optional control-label control-label" for="listing_listing_category_id">Category:</label><div class="controls"><select class="select optional" id="listing_listing_category_id" name="listing[listing_category_id]"><option value=""></option>
<option value="1">Exclusive</option>
<option value="2">Open</option></select></div></div>

          <div style="display: none;" data-show-for="Exclusive">
            <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_listing_type_id">Listing type</label><div class="controls"><select class="select optional" id="listing_listing_type_id" name="listing[listing_type_id]"><option value=""></option>
</select></div></div>
            <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_user_id">User</label><div class="controls"><select class="select optional" id="listing_user_id" name="listing[user_id]"><option value=""></option>
<option value="1">First User</option>
<option value="2">Second User</option>
<option value="3">Third User</option>
<option value="4">Fourth User</option>
<option value="5">Fifth User</option></select></div></div>
            <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_boro_id">Boro</label><div class="controls"><select class="select optional" id="listing_boro_id" name="listing[boro_id]"><option value=""></option>
<option value="1">Brooklyn</option></select></div></div>
          </div>

          <div style="display: none;" data-show-for="Open">
            <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_neighborhood_id">Neighborhood</label><div class="controls"><select class="select optional" id="listing_neighborhood_id" name="listing[neighborhood_id]"><option value=""></option>
<option value="1">Prospect Heights</option></select></div></div>    
            <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_building_id">Building</label><div class="controls"><select class="select optional" id="listing_building_id" name="listing[building_id]"><option value=""></option>
<option value="1">Trump Towers</option></select></div></div>
            <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_term_id">Term</label><div class="controls"><select class="select optional" id="listing_term_id" name="listing[term_id]"><option value=""></option>
</select></div></div>
            <div class="control-group select optional form-horizontal"><label class="select optional control-label" for="listing_property_type_id">Property type</label><div class="controls"><select class="select optional" id="listing_property_type_id" name="listing[property_type_id]"><option value=""></option>
<option value="1">Coop</option></select></div></div>
          </div>


    <div class="form-actions">
                <input class="btn btn btn-primary" name="commit" type="submit" value="Create Listing" />
          <!-- <button type="submit" class="btn btn-primary">Save and Continue</button>
          <button type="reset" class="btn">Cancel</button> -->
                </div>
              </fieldset>

</form>

listing.jsこれは、このフォームが存在するファイルに対応する、私が含めた JS です。app/views/listings/new.html.erb

$(document).ready(function({

    $('#listing_listing_category_id').on('change', function(){
        var option = $(this).find(':selected');
        $('[data-show-for]').hide(); //And maybe reset?
        $('[data-show-for="+ option.text +"]').show()
    });

});

必要なオプションを選択しても、見たいフィールドが表示されません。

4

1 に答える 1

6

個人的には AJAX を使用せず、単純に JS/JQuery を使用して、データ属性を使用してクリック時に表示/非表示を切り替えます。

フィドルを参照してください: http://jsfiddle.net/XnPZF/

まず、非表示/表示するセクションにデータ属性を追加します。

<div style="display: none;" data-show-for="coop">
  <%= f.input :maintenance %>
  <%= f.input :coop_deductible %>
  <%= f.input :flip_tax %>
</div>

<div style="display: none;" data-show-for="condo">
  <%= f.input :common_charges %>
  <%= f.input :taxes %>
</div>

次に、選択時に変更イベントを作成します。

$('#listing_property_type').on('change', function(){
    var option = $(this).find(':selected');
    $('[data-show-for]').hide(); //And maybe reset?
    $('[data-show-for='+ option.text() +']').show()
});

data-show-for には、Option テキストまたは値を使用できますが、イベントがどちらを認識しているかを確認してください。これを何度も使用する予定がある場合は、一般化できますが、それはオプションを構築することを意味します。

于 2013-01-24T21:04:24.743 に答える