Как мы можем отображать различные частичные формы через клики в рельсах

Question

У меня есть Navbar рендеринга как частичное.

пример: панель инструментов / меню

В Navbar у меня есть ссылки, такие как наставник, корпоративный.

Когда вы нажимаете на эти ссылки, он отображает различные части формы.

Пример:

_menu.html.erb

<a id="mentor" href="dasboard/settings">mentor</a>
<a id="corporate" href="dasboard/settings">corporate</a>

на странице настроек: наставник и корпоративные формы на странице настроек.

<div id="men">
<% form_for() %>
  #mentor fields
<% end %>
</div>

<div id="cor">
<% form_for() %>
  #corporate fields
<% end %>
</div>

JQuery и CSS с в настройках страницы:

#men,#cor{
 display: none;
}
$("#mentor").on("click", function(){
  $("#men").css("display", "block");
)};
$("#corporate").on("click", function(){
  $("#cor").css("display", "block");
)};

Но, когда я нажимаю на ссылки на панели навигации, это происходит. Даже я не получил никакой ошибки.

обновлено:

Я разместил навигационные ссылки на странице настроек. Работает нормально.

Но из частичного меню это не сработало.

Answer 1

Вы не правильно выбираете, в вашем скрипте jquery есть две ошибки

1. Вы не правильно выбираете. Этот селектор $("men") не выберет ничего, потому что селектор не будет men пока не добавишь #,
2. css({"display: block"}) Это также неправильный подход для добавления CSS на любой элемент

Попробуйте следовать

$("#mentor").on("click", function(){
  $("#men").css("display", "block");
)};
$("#corporate").on("click", function(){
  $("#cor").css("display", "block");
)};

Answer 2

Правильный код для вашего решения будет

$("#mentor").on("click", function(event){
  event.preventDefault();
  $("#men").css("display", "block");
});

$("#corporate").on("click", function(event){
  event.preventDefault();
  $("#cor").css("display", "block");
});

Вот пример JSbin

Примечание: я добавил event.preventDefault(), чтобы ссылки не отправляли запрос на сервер и, таким образом, только отображали загруженный код. Если вы хотите визуализировать форму, извлекая данные с сервера, вы можете использовать удаленные ссылки.