ruby-on-rails – 如何使用Simple Form创建交互式表单?
我有一个模型(清单),它有许多很多属性(比如25).
我想基于表单中的输入创建一个动态的AJAX表单. 这意味着如果用户选择type = b,他们将看到他们应该看到的其他字段,而不是他们不应该看到的字段. 理想情况下,他们应该使用db中的正确内容立即加载 – 即以AJAXy方式加载. 什么是最好的方法来解决这个问题? 谢谢. 编辑:以下是我的_form.html.erb示例.您会注意到我已经包含了2个if语句,这些语句指示如果选择的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="✓" /><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() }); }); 当我选择我想要的选项时,它不会显示我想要看到的字段. 解决方法
我个人不会使用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> 然后在select上创建一个change事件: $('#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文本或值,只需确保事件知道哪个.如果你计划多次使用它,你可以概括它,但这意味着建立你的选择. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |