Ruby 远程部分被渲染两次

Question

我今天下午一直在移动代码，尝试不同的东西等等，但无法解决我的（可能很简单的）问题。我的索引布局上有一个按钮，它在模态对话框中显示部分表单，用于 a) 创建新条目或 b) 编辑现有条目。我正在使用物化、简单表单和客户端验证 gem。

当我点击一个新条目的按钮时，模式出现两次，看起来有点垃圾，但更重要的是，当我尝试保存一个条目时，发出了两次 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>

然后在 new.js.erb

中加载 javascript

$('#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 作为一个独立的要求（就像我现在一样）。

所以解决方案是 删除行 //= require jquery-ujs 并且只有以下内容：

//= require rails-ujs

感谢 lacostenycoder 的帮助

Ruby 远程部分被渲染两次

Ruby remote partial being rendered twice

ruby

ruby-on-rails

materialize