Question

今天下午我花了很多时间在移动代码，尝试各种不同的事情，但是无法解决我的（可能很简单）的问题。我在索引布局上有一个按钮，该按钮在模式对话框中显示部分表单，以便a）创建新条目或b）编辑现有条目。我正在使用物化，简单表单和客户端验证工具。

当我单击新条目的按钮时，模态出现两次，看起来有点垃圾，但更重要的是，当我尝试保存条目时，发出了两个POST请求。

很明显，我只希望部分表单呈现一次...但是我不知道为什么它会出现两次。

非常感谢您的帮助，如果您需要的内容超出了我在下面提供的内容，请告诉我。

这是 index.html.erb 布局中的按钮代码

<div class="fixed-action-btn">

    <%= link_to "<i class='material-icons'>add</i>".html_safe, 
    new_patient_path, :remote => true, :id => 'new_patient_link', 
    :class => "btn-floating btn-large red" %>

</div>

然后将javascript加载到 new.js.erb

$('#modal_partial').html('<%= escape_javascript(render('form')) %>');

随后，将 _form.html.erb 部分呈现到以下div中（存储在 shared / _footer.html.erb 部分中，位于底部索引页面。

<div id="form_modal_wrap">
  <div id="modal_partial" class="modal modal-fixed-footer">
  </div>
</div>

和 _form.html.erb 部分：

<div id="edit_patient_modal" class="";>
<%= simple_form_for @patient, validate: true, remote: true do |f| %>

  <div class="modal-content" style="padding: 0px;">

    <h4 class="col s12" style="margin: 0px; padding: 10px 25px;">New Patient</h4>


    <%= f.error_notification %>


    <div class="row">

      <div class="col s12" style="padding: 0px;">

        <ul class="tabs" style="padding: 0px;">

          <li class="tab col"><a class="active"  href="#demographics">Demographics</a></li>
          <li class="tab col"><a class="active"  href="#admission">Admission</a></li>
          <li class="tab col"><a href="#presentation">Presentation</a></li>
          <li class="tab col"><a href="#jobs">Jobs</a></li>
          <li class="tab col"><a href="#results">Results</a></li>

        </ul>

      </div>


      <div id="demographics" class="col s12" style="padding: 20px;">

        <%= f.input :nhs, :label => "NHS"  %>

        <%= f.input :fname, :label => "Firstname" %>
        <%= f.input :lname, :label => "Lastname", validate: { presence: true, uniqueness: false }  %>
        <%= f.input :dob, :label => "DOB", as: :date, start_year: Date.today.year - 110,
                          end_year: Date.today.year - 12,
                          order: [:day, :month, :year] %>

        <%= f.input :mrn, :label => "MRN" %>



      </div>

      <div id="admission" class="col s12" style="padding:20px;" >

        <%= f.association :location %>
        <%= f.input :bed, :label => "Bed" %>
        <%= f.association :team, input_html: { multiple: true } %>

      </div>

      <div id="presentation" class="col s12" style="padding:20px;">



        <%= f.input :dx, :label => "Dx" %>
        <%= f.input :pmh, :label => "PMH" %>


      </div>

      <div id="jobs" class="col s12" style="padding:20px">

        <p>This job list is shared between all teams.</p>
        <%= f.input :jobs, :label => "Jobs" %>

      </div>

      <div id="results" class="col s12" style="padding:20px;">


      <table>
        <tr>
          <th>Group</th>
          <th>Result</th>
          <th>Date</th>
        </tr>
        <% @patient.results.each do |result| %>
          <tr>
            <td>
              <%= Investigation.find(result.investigation_id).group %>
            </td>
            <td>
              <%= Investigation.find(result.investigation_id).short %>
              <%= result.value %>
            </td>
            <td>
              <%= result.date %>
            </td>
          </tr>
        <% end %>
      </table>
      </div>

    </div>



  </div>


  <div class="modal-footer"> 

    <a id="modal_close" href="#!" class="modal-close waves-effect waves-pink btn-flat">Cancel</a>
    <%= f.button :submit, :class => "waves-effect btn" %>

  </div>



<% end -%>

以下javascript位于 _form.html.erb 部分的底部：

  $(document).ready(function(){
    $('#modal_partial .tabs').tabs();
    $('#modal_partial select').formSelect();
    $('#modal_partial').modal();
    $('#modal_partial').modal('open');
    $('form').enableClientSideValidations(); 
  });

  $("#modal_close").on("click", function(e) {
    e.preventDefault();
    $('#modal_partial').modal('close');
  });

</script>

Answer 1

调试此错误的唯一方法是检查代码的每一部分，其中加载了javascript包括布局。某种原因导致表单重复，但是如果不查看所有代码就无法调试。

Answer 2

所以我算出我到底做了什么...

在 application.js 中，我添加了以下两项：

//= require jquery_ujs
//= require rails-ujs

通过删除这些模式之一，仅出现一次。阅读文档后，我只需要rails-ujs即可，因为它执行与jquery_ujs相同的功能，但不依赖于jquery。这并不意味着您仍然不能将jquery作为一个独立的需求（就像我现在所做的那样）。

因此解决方案是删除行// =需要jquery-ujs 并仅包含以下内容：

//= require rails-ujs

感谢lacostenycoder对您的帮助

Ruby远程部分被渲染两次

2 个答案: