远程表单打开页面上的所有其他远程表单答案

【问题标题】：Remote form opens all other remote forms on the page远程表单打开页面上的所有其他远程表单
【发布时间】：2019-05-17 12:18:03
【问题描述】：

我有一个用户仪表板控制器，在同一个视图中有多个远程表单，供用户更新杂项属性：

class CustomerDashboardController < ApplicationController
  def settings
  end
end

//settings.html.erb
<div class="info__item">
  <p class="info-item__heading">Name: <%= link_to "Edit", "", class: "info-edit__link", id: "user-edit__name", remote: true %></p>
</div>

<div class="info__item">
  <p class="info-item__heading">Email: <%= link_to "Edit", "", class: "info-edit__link", id: "user-edit__Email", remote: true %></p>
</div>

jquery ujs 触发器存在于*.js.erb 文件中，其名称与包含表单的相应操作/视图模板相匹配：

//customer-dashboard/settings.js.erb
$('#user-edit__name').hide().after('<%= j render("user-edit-name-form") %>');
$('#user-edit__address').hide().after('<%= j render("user-edit-address-form") %>');

每个表单都正确呈现和更新属性，但是，当单击带有 remote: true 的单个链接时，它会同时呈现页面上的每个表单部分，而不是仅与具有唯一 id: "" 的链接相关的单个部分

【问题讨论】：

只是好奇，您是否可以选择使用 display: none 呈现所有表单并切换可见性而不是点击 JS 操作来呈现表单？
感谢您的回复。是的，这确实有效，并且允许我完全跳过 remote: true，但我希望用户可以选择仅呈现他们要求在适当位置编辑的表单。

标签： jquery ruby-on-rails ujs

【解决方案1】：

根据@NM Pennypacker 的建议，我找到了一个解决方案，完全跳过使用remote: true，而只使用Javascript 来切换多个表单部分的可见性。

我的 javascript 解决方案：

  allEditButtons = document.querySelectorAll('.info-edit__link');

  const showFormListener = event => {
    event.preventDefault();
    toggleAdjacentFormVisibility(event);
  };

  allEditButtons.forEach(element => {
    element.addEventListener('click', showFormListener);
  });

  function toggleAdjacentFormVisibility(event) {
    event.target.parentElement.nextElementSibling.classList.toggle(
      'info__is-not-visible'
    );
    event.target.parentElement.nextElementSibling.nextElementSibling.classList.toggle(
      'info__is-visible'
    );
  }

观点：

  <div class="info__item">
      <p class="info-item__heading">Email: <%= link_to "Edit", "", class: "info-edit__link" %></p>

      <p class="info-item__info">
        <%= @user.email %>
      </p>

      <div class="info-item__form-container">
        <%= render ('user-edit-email-form') %>
   </div>

    </div>

  <div class="info__item">
      <p class="info-item__heading">Email: <%= link_to "Edit", "", class: "info-edit__link" %></p>

      <p class="info-item__info">
        <%= @user.phone %>
      </p>

      <div class="info-item__form-container">
        <%= render ('user-edit-phone-form') %>
      </div>

    </div>

CSS：

  .info__is-visible {
    display: block;
  }
  .info__is-not-visible {
    display: none;
  }

【讨论】：