Условно отображать поля формы на основе выбора пользователя

Question

Приложение имеет несколько типов свойств, таких как дом, квартира, магазин, земля, ферма и т. Д.

Сначала пользователь выбирает тип свойства в поле выбора и на основе типаиз выбранного свойства, мне нужно визуализировать остальную часть формы только с определенными особенностями каждого типа свойства.Я использую вложенные атрибуты с simple_form.

Свойства зарегистрированы в одной таблице, которая содержит общие атрибуты и строковый столбец с типом свойства.Другие атрибуты находятся в отдельных таблицах: структурные атрибуты (площадь, площадь земли, этажи, комнаты и т. Д.), Адрес (штат, город, район) и конкретные характеристики (название кондоминиума, положение в здании и т. Д.) ..

Я нашел нечто подобное, используя функцию .change () в jQuery.Но я не мог заставить его работать в моем приложении rails 3.Должен ли я использовать случай - когда, чтобы отобразить каждый тип формы на основе выбранного значения?Должен ли я использовать партиалы для каждой конкретной формы?

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

Заранее спасибо и извините за ужасный английский.

Answer 1

Лично я бы отрисовывал все формы одновременно и скрывал их с помощью css. Затем с помощью функции jQuery .change () проверьте, какой тип свойства выбран, и используйте jQuery, чтобы отобразить соответствующие разделы формы. Это может быть немного дороже при начальной загрузке страницы, но, вероятно, будет быстрее / проще, чем опросить сервер, чтобы получить соответствующие поля формы для визуализации после выбора пользователя.

Какой-то псевдокод для этого будет выглядеть так:

Форма:

<select id="property_type">
  <option value='type_1'>Type 1</option>
  <option value='type_2'>Type 2</option>
</select>

<div id='type_1' class='type_forms'>
  <form></form>
</div>

<div id='type_2' class='type_forms'>
  <form></form>
</div>

JS:

$('select#property_type').bind('change', function() {
  $('.type_forms').hide();
  $('.type_forms input').attr('disabled', true);
  var selection = $(this).val();
  $('#' + selection).show();
  $('#' + selection + ' input').attr('disabled', false);
}).change();

Это определенно может быть одобрено, но, надеюсь, это поможет проиллюстрировать идею.

Если вам нужно опросить сервер, вы можете использовать вызов ajax в функции .change (), чтобы сообщить контроллеру о действии выбора пользователя, а затем отобразить соответствующий фрагмент для отображения в обратном вызове ajax.