1

嗨,我有一个使用嵌套表单的 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 %>
4

1 回答 1

2

您可以使用 jquery first 选择器根据父 div 的 id 或类名(您当前未设置)删除第一个删除按钮

<div class="citizens_update">
  <%= 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>

然后使用jquery在citizen_update div中找到delerr的第一个实例并将其删除

$(".citizens_update").find("#delerr:first").remove

http://jsfiddle.net/tiri/ayTrw/

于 2013-09-18T20:57:43.510 回答