[英]How to render a partial within javascript
我在页面上有两种形式,它们的输入几乎相同。 我在屏幕上的选项卡可以在每种形式之间切换。 但是,当我提交其中一种表格时,我在另一种表格的相同输入字段上收到“不能空白”。 我了解为什么会这样。 我试图通过使用if语句仅根据单击哪个选项卡来呈现两种形式来阻止这种情况。 这无法正常工作,因为您无法在if语句中定位html id。 然后我尝试使用javascript,根据所单击的选项卡,它使用了“显示”和“隐藏”方法,这也没有用,因为我相信即使表单仍处于隐藏状态,它实际上仍然存在。 现在我不知道该怎么办。 我唯一的想法是在javascript中呈现表单?
<input id="tab1" type="radio" name="tabs" checked>
<label class="label-header" for="tab1"> UK Address</label>
<input id="tab2" type="radio" name="tabs">
<label class="label-header"for="tab2"> International Address </label>
<!-- <section id="content1"> -->
<%# if %>
<%= f.simple_fields_for :address do |fields| %>
<%# raise %>
<section id="content1">
<%= render "address/fields", fields: fields, addressable: addressable %>
</section>
<% end %>
<%# else %>
<%= f.simple_fields_for :address do |fields| %>
<section id="content2">
<%= render "address/international_fields", fields: fields, addressable: addressable %>
</section>
<% end %>
$(document).ready(function() {
var uk_address = $('#content1');
var international_address = $('#content2');
$('#tab1').on('click', function() {
uk_address.show();
international_address.hide();
});
$('#tab2').on('click', function() {
uk_address.hide();
international_address.show();
});
});
通过此修改,您应该能够启用/禁用javascript中的项目:
$(document).ready(function() {
var uk_address = $('#content1');
var international_address = $('#content2');
$('#tab1').on('click', function() {
uk_address.removeAttr("disabled").show();
international_address.attr("disabled", "disabled").hide();
});
$('#tab2').on('click', function() {
uk_address.attr("disabled", "disabled").hide();
international_address.removeAttr("disabled").show();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.