Ruby on rails Ruby远程部分将被渲染两次

我花了一下午的时间四处移动代码，尝试不同的事情，等等，但我无法解决我的（可能很简单）问题。我的索引布局上有一个按钮，在模式对话框中显示部分表单，a）创建新条目或b）编辑现有条目。我正在使用materialize、simple表单和客户端验证gems

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

true，：id=>“新建患者链接”，
：class=>“btn浮动btn大红色”%>

然后在new.js.erb中加载javascript

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

$（'#modal_partial'）.html（''）；

随后将\u form.html.erb分部呈现到以下div中（该div存储在shared/\u footer.html.erb分部中，并位于索引页的底部）

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

以及\u 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 -%>

新病人







“NHS”%>
“名字”%>
“Lastname”，验证：{presence:true，university:false}%>
“DOB”，as:：date，start_year:date.today.year-110，
结束年份：Date.today.year-12，
订单：[：日、月、年]]>
“MRN”%>
“床”%>
“Dx”%>
“PMH”%>
此作业列表在所有团队之间共享

“工作”%>
团体
结果
日期
“波浪效应btn”%>

以下javascript位于\u form.html.erb部分的底部：

$（文档）.ready（函数（）{
$（'#modal_partial.tabs'）.tabs（）；
$（“#模态#u部分选择”）.formSelect（）；
$（'modal#u partial'）。modal（）；
$（'modal'u partial'）。modal（'open'）；
$（'form'）。enableClientSideValidations（）；
});
$（“#模式_关闭”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'modal#u partial'）。modal（'close'）；
});

调试的唯一方法是检查加载javascript（包括布局）的代码的每个部分。某些原因导致表单重复，但不查看所有代码就无法进行调试。

调试的唯一方法是检查加载javascript（包括布局）的代码的每个部分。某些原因ing导致表单重复，但如果不查看所有代码，则无法进行调试。

因此我最终确定了我所做的工作

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

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

//= require rails-ujs

通过删除其中任何一个，modals只出现一次。阅读文档后，我只需要rails ujs，因为它执行与jquery_ujs相同的功能，但不依赖于jquery。这并不意味着你不能将jquery作为一个独立的需求（我现在仍然这样做）

因此，解决方案是删除行/=require jquery ujs，只需执行以下操作：

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

//= require rails-ujs

---

谢谢lacostenycoder的帮助

所以我终于知道我到底做了什么

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

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

//= require rails-ujs

通过删除其中任何一个，modals只出现一次。阅读文档后，我只需要rails ujs，因为它执行与jquery_ujs相同的功能，但不依赖于jquery。这并不意味着你不能将jquery作为一个独立的需求（我现在仍然这样做）

因此，解决方案是删除行/=require jquery ujs，只需执行以下操作：

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

//= require rails-ujs

---

感谢lacostenycoder提供的帮助

我在分部中呈现它，因为我发现materialize的选项卡和选择元素不会应用于主页之后呈现的分部。如果我从javascript中删除该行，我会得到以下错误：Uncaught TypeError:无法读取undefined的属性“open”。如果我使用.modal（'open'）移动后续行，则不显示任何模式，但我没有收到错误。由于javascript位于分部中，因此在分部准备就绪后，而不是在初始索引页（仅在单击按钮时加载分部）就会激发javascript。移动div仍然会导致部分加载两次，只是丢失了materialize模态设计，因为这些类是模态工作所必需的。（）.棘手！我在分部中呈现它，因为我发现materialize的tabs和select元素不会应用于主页之后呈现的分部。如果我从javascript中删除该行，我会得到以下错误：Uncaught TypeError:无法读取undefined的属性“open”。如果我删除后面的行，则返回undefined。模态（'open'）然后不显示模态，但我没有得到错误。由于javascript在分部中，它会在分部准备就绪而不是初始索引页（分部仅在单击按钮时加载）。移动div仍然会导致分部加载两次，只是丢失了