HTML / Rails表单仅在重新加载时提交

时间:2015-11-29 17:04:57

标签: jquery html ruby-on-rails forms

我有一个rails表单,可以使用自定义控制器一次创建多达25个新对象(此应用程序中的文章)。我写了一些简单的jquery隐藏表单2-25,直到用户点击“Add More Essays”按钮,显示其余的表单。刷新页面后提交/持久性工作正常 - 即使我之前遇到过这个错误 - 我很确定这是一个HTML问题。 HTML不是我的力量,我找不到问题的根源。我知道根据this帖子一起使用时,表格/表格可能会有问题。任何指导都会很棒。

HTML:

    <!-- essay form -->

<%= form_tag essays_path, multipart: true do |form| %>
  <% @essays.each do |essay| %>
   <% if essay.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@essay.errors.count, "error") %> prohibited this essay from being saved:</h2>

      <ul>
      <% @essay.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>  <!-- closes @essay.errors... loop -->
   <% end %>  <!-- closes essay.errors... loop -->
      </ul>
    </div>
  <% end %>  <!-- closes @essays.each... loop -->


  <% @essays.each do |essay| %>
    <%= fields_for 'essays[]', essay do |f| %>
    <div class="field list-group-item essay-upload">

      <div class="actions col-md-6 col-md-offset-3">
          <%= submit_tag 'Upload Essay(s)', :class => 'upload-individual-essay btn btn-lg btn-primary btn-block upload-new-essays'%>
      </div>

      <table class="table">

        <thead>
          <tr>
            <% if current_user.admin? %>
            <th>Company</th>
            <% end %>
            <th>Student First Name</th>
            <th>Student Last Name</th>
            <th>Package</th>
            <th>Document</th>
            <th></th>
          </tr>
        </thead>

        <tbody>
          <tr class="essays-new-table-row">
            <% if current_user.admin? %>
            <td>
            <div class="field list-group-item">
                <div>
                  <%= f.select :company_id, options_for_select(@companies) %>
                </div>
            </div>
            </td>
            <% end %> <!-- closes current_user.admin? -->

            <td>
              <%= f.text_field :student_first_name, class: 'form-control', placeholder: 'First Name' %>
            </td>
            <td>
              <%= f.text_field :student_last_name, class: 'form-control', placeholder: 'Last Name' %>
            </td>
            <td>
                <div class="list-group-item">
                  <%= f.select :package_id, options_for_select(@packages) %>
                </div>
            </td>
            <td>
              <%= f.file_field :document, class: "essays__document" %>
            </td>
          </tr>
        </tbody>

      </table>

      <button type="button" class="btn btn-lg btn-success btn-block add-another-essay"> Add More Essays</button><br>

    </div>  <!-- <div class="field list-group-item essay-upload">  -->

    <% end %>  <!-- closes field_for -->

  <% end %>  <!-- closes second @essays.each ... -->

<% end %>  <!-- closes closes form  -->

JS:

var ready;
ready = function() {

  // FUNCTIONALITY: hide extra divs

  $(".essay-upload").hide();
  $(".essay-upload:first").show();

  // FUNCTIONALITY: reveal other forms on 'add more essays' click 

  $('.add-another-essay').on('click', function(){
    $(".essay-upload").show();  
    $('.add-another-essay').remove(); 
    $('.upload-individual-essay').hide();
    $('.upload-individual-essay:first').show();
  })

$(document).on('page:change', ready);

1 个答案:

答案 0 :(得分:1)

根据我所看到的,你总是只显示一个(第一个)submit_tag,但你有25个!在页面上提交标签...

您如何考虑将此submit_tag移到循环之外? (@ essays.each)。那里不需要它(它提交最高形式)。在这种情况下,您可以避免隐藏&amp;显示提交标签

$('.upload-individual-essay').hide();
$('.upload-individual-essay:first').show();

提交标记的位置可以通过CSS样式设置

对于我的观点,理解它会更清晰。