Удаленная форма открывает все другие удаленные формы на странице - PullRequest
Новая
       29

Удаленная форма открывает все другие удаленные формы на странице

0 голосов
/ 17 мая 2019

У меня есть пользовательский контроллер панели мониторинга с несколькими удаленными формами внутри одного представления, чтобы пользователь мог обновлять атрибуты misc: 

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: ""

1 Ответ

0 голосов
/ 18 мая 2019

По предложению @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;
  }
...