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

Question

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

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 文件中，其名称与包含表单的适当 action/view 模板相匹配：

//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 的单个 link 时，它会同时在页面上呈现每个单独的表单部分，而不仅仅是与具有唯一 id: ""[的 link 相关的单个部分

Answer 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;
  }

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

Remote form opens all other remote forms on the page

jquery

ruby-on-rails

ujs