嗨,我有一个使用嵌套表单的 Rails 应用程序,例如,在一个部分上,您可以添加任意数量的链接。我还有其他公民代码,因为某些用户有两个公民。
我的问题是,至少你需要输入 1 个公民。我可以用 jquery validate 来实现,我已经在运行它了。问题是 Rails 为每个字段插入的删除按钮。所以我可以从字面上删除所有表单中的字段
有没有办法让用户添加的字段只有删除按钮..而不是全部?
有没有关于这个的任何文件..我找不到它。
这是我的代码。
<div id="nacionalidad">
<%= f.fields_for :citizens do |citizen_form| %>
<div>
<%= citizen_form.label :citizen, t('generales.citizen') %>
<%= citizen_form.select :country_id , Country.all.collect {|p| [ t("generales."+p.iso), p.id ] }, { :include_blank => true } , { :class => 'pca33' } %>
<div id="delerr"><%= citizen_form.link_to_remove t('generales.delete') %></div>
</div>
<% end %>
<%= f.link_to_add t('generales.add'), :citizens %>
</div>
模型citizen.rb
class Citizen < ActiveRecord::Base
attr_accessible :country_id
belongs_to :player
end
谢谢
这是完整的视图代码。一切正常,只有两个问题:
1) 即使第一项也始终存在删除按钮,需要为第一项删除此删除按钮
2)如果我为公民选择一个国家,它会添加第二个选项,有没有办法避免这种情况..并且只有在用户点击这个..添加按钮时才添加新字段..
谢谢!!!
完整查看代码
<!-- Información personal y de contacto -->
<div id="wrapper_signup">
<%= link_to image_tag("espanol/logo.jpg", :border => 0), root_path , :class => 'logoo' %>
<div id="loggeddiv">
<%= link_to "#{current_user.email}", '#' %> |
<%= link_to (t ('generales.salir')), destroy_user_session_path, :method => :delete %>
</div>
<div id="navsteps" >
</div>
<div id="signupdiv">
<%= nested_form_for @player, :url => wizard_path do |f| %>
<div id="nombre">
<%= f.label :name %>
<%= f.text_field :name , :value => "#{current_user.name}"%>
</div>
<div id="apellidos">
<%= f.label :lastname %>
<%= f.text_field :lastname, :value => "#{current_user.lastname}" %>
</div>
<div id="cumple">
<%= f.label :birthday %>
<%= f.date_select :birthday, :start_year => 1950, :include_blank => true %>
</div>
<div id="altura">
<%= f.label :height %>
<%= f.select :height, Player::HEIGHT.each {|h| [ h, h ] } , :include_blank => true %> <%= f.select :height_measure, Player::HEIGHT_MEASURE.each {|h| [ h, h ] } %>
<%= f.select :inches, Player::INCH.each {|h| [ h, h ] }, {}, :style => (@player.inches.present? && @player.height_measure == 'pies' ? 'display: inline ' : 'display: none') %>
<%= f.label :inches, :id => 'inch_label', :style => (@player.inches.present? && @player.height_measure == 'pies' ? 'display: inline ' : 'display: none') %>
</div>
<div id="peso">
<%= f.label :weight %>
<%= f.select :weight, Player::WEIGHT.each {|w| [ w, w ] }, :include_blank => true %> <%= f.select :weight_measure, Player::WEIGHT_MEASURE.each {|h| [ h, h ] } %>
</div>
<div id="ciudad">
<%= f.label :city %>
<%= f.text_field :city %>
</div>
<div id="cnatal" >
<%= f.label :birthplace %>
<%= f.text_field :birthplace %>
</div>
<div id="nacionalidad">
<%= f.fields_for :citizens do |citizen_form| %>
<div>
<%= citizen_form.label :citizen, t('generales.citizen') %>
<%= citizen_form.select :country_id , Country.all.collect {|p| [ t("generales."+p.iso), p.id ] }, { :include_blank => true } , { :class => 'pca33' } %>
<div id="delerr"><%= citizen_form.link_to_remove t('generales.delete') %></div>
</div>
<% end %>
<%= f.link_to_add t('generales.add'), :citizens %>
</div>
<div id="idiomlen">
<%= f.label :languages %>
<% for language in Language.find(:all) %>
<div class="idiomlenbox"><%= check_box_tag "player[language_ids][]", language.id, @player.languages.include?(language) %>
<%= t("languages.#{language.name}") %></div>
<% end %>
<div id="idiomlenotro">
<%= f.label :other_languages %><br>
<%= f.text_field :other_languages %>
</div>
</div>
<div id="cargafoto">
<button type="button" class="photo-button" onclick="document.getElementById('files').click();"><p> <%= t('generales.photo') %> </p></button>
<div id="upload-wrap">
<%= f.file_field :avatar , id: "files" %>
</div>
<div class="thumbperwrap">
<output id="list">
<div class="wraptocenter"><span></span>
<% if @player.avatar.present? %>
<%= image_tag @player.avatar.url(:profile), :class => "thumbper" %>
<% else %>
<img src="../assets/espanol/playersample.png" class="thumbper">
<% end %>
</div>
</output>
</div>
</div>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
document.getElementById('list').innerHTML = "";
var span = document.createElement('span');
span.innerHTML = ['<div class="wraptocenter"><span></span><img class="thumbper" src="', e.target.result,
'" title="', escape(theFile.name), '"/></div>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<div id="videosyt">
<%= f.fields_for :links do |link| %>
<div id="videosytin">
<%= link.label :url %>
<%= link.text_field :url %>
<%= link.link_to_remove t('generales.delete') %>
</div>
<% end %>
<%= f.link_to_add t('generales.add'), :links %>
</div>
<div id="direc">
<%= f.label :cp %>
<%= f.text_field :cp %>
</div>
<div id="telef">
<%= f.label :phone %>
<%= f.text_field :phone %>
</div>
<div id="celu">
<%= f.label :cellphone %>
<%= f.text_field :cellphone %>
</div>
<div id="webpp">
<%= f.label :web_page %>
<%= f.text_field :web_page %>
</div>
<div id="next11">
<%= f.submit t('generales.next'), :class => 'siggreenc' %>
</div>
<% end %>
</div>
</div>
<%= javascript_tag do %>
$('#player_height_measure').on('change', function() {
if (this.value == 'pies') {
$('#player_inches').css('display', 'inline');
$('#inch_label').css('display', 'inline');
} else {
$('#player_inches').css('display', 'none');
$('#inch_label').css('display', 'none');
}
});
<% end %>
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
<%= javascript_tag do %>
window.onload = function() {
// validate signup form on keyup and submit
$(".edit_player").validate({ // initialize the plugin
errorElement: 'div'});
$("#player_name").rules("add", { required: true, minlength:2, messages: { required: "<%= t('generales.camporequerido') %>", minlength: "Mínimo 2 caracteres"}});
$("#player_lastname").rules("add", { required: true, minlength:2, messages: { required: "<%= t('generales.camporequerido') %>", minlength: "uh minlength?"}});
$("#player_birthday_1i").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_birthday_2i").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_birthday_3i").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_height").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_weight").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_city").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_birthplace").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_citizen").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_phone").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_cellphone").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#files").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
};
jQuery.extend(jQuery.validator.messages, {
required: "<%= t('generales.camporequerido') %>",
remote: "Please fix this field.",
email: "Ingresa un correo electrónico válido.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
<% end %>