Использование ruby ​​"динамически" с помощью jQuery в rails

Question

Получил приложение rails, которое имеет форму (новое действие) с выбором с диапазоном значений параметров от 1 до 5. Когда пользователи выбирают один из параметров, мне нужно использовать ruby ​​«build» для построения ряда объектов. в зависимости от того, какое значение выбрано.

Поэтому, когда пользователь выбирает 2 в поле выбора, необходимо выполнить следующий код:

@rooms = 2.times { @travel.rooms.build }

Также, когда пользователи изменяют это значение с 2 на 1, код необходимо заменить на

@rooms = 1.times { @travel.rooms.build }

В основном у меня возникают проблемы с поиском способа установки значения в jQuery и последующим обновлением его в html. Получение значения не проблема, проблема заключается в том, как его динамически изменить в html.

Какие-нибудь советы о том, как поступить с этим?

Спасибо, Amund

Редактировать - Уточнение

Мне нужно, чтобы это произошло до отправки формы.

@rooms = 2.times { @travel.rooms.build }

Таким образом, любые изменения в вышеуказанном должны происходить, пока пользователь находится на странице формы.

Answer 1

Я нашел способ, который работает, хотя он не красив и не работает, если у пользователя нет JS (В моем случае, если у пользователя нет JS, он может получить gtfo).

Ниже приведен код, необходимый для его работы.(Имейте в виду, что это работает, но я ничего не сделал, чтобы сделать его более кратким или лучшим).пс.Это похоже на ад.

$('#room_details .fields').hide();
$('#room_details .fields:eq(0)').show();
$('.fields:eq(0)').find('.is_wanted').val("true");
$('#number_of_rooms').change(function() {
$('#room_details .fields').hide();
$('.is_wanted').val("");
if($(this).val() == '1') {
  $(".fields:eq(0)").each(function() {
    $(this).show();
    $(this).find('.is_wanted').val("true");
  });
}
else if ($(this).val() == '2'){
  $(".fields:eq(0), .fields:eq(1)").each(function() {
    $(this).show();
    $(this).find('.is_wanted').val("true");
  });
}
else if ($(this).val() == '3'){
  $(".fields:eq(0), .fields:eq(1), .fields:eq(2)").each(function() {
    $(this).show();
    $(this).find('.is_wanted').val("true");
  });
}
else if ($(this).val() == '4'){
  $(".fields:eq(0), .fields:eq(1), .fields:eq(2), .fields:eq(3)").each(function() {
    $(this).show();
    $(this).find('.is_wanted').val("true");
  });
}
else if ($(this).val() == '5'){
  $(".fields:eq(0), .fields:eq(1), .fields:eq(2), .fields:eq(3), .fields:eq(4)").each(function() {
    $(this).show();
    $(this).find('.is_wanted').val("true");
  });
}
});

Тогда в модели мы делаем:

accepts_nested_attributes_for :rooms, :allow_destroy => true, :reject_if => proc { |attrs| attrs['is_wanted'].blank? }

Где is_wanted - это скрытое поле в форме для каждой комнаты.Я уверен, что есть более красивые способы, но, по крайней мере, это работает.

Есть мысли?

Answer 2

Я не уверен, что вам нужна помощь Ruby или jQuery?Ну, в любом случае, есть немного Руби.Я включил проверку входных данных только для хорошей меры:

count = (params[:number_of_rooms] || 1).to_i
count = [1, [5, count].min].max
@rooms = (0...count).collect { @travel.rooms.build }

Я не склонен писать решение в JS, но в общем случае вы добавляете наблюдателя в поле выбора, а затем добавляете поля, создавая HTML-элементы dom.Предполагая, что у вас уже есть одна из форм, построенных на странице, вы, вероятно, можете сделать несколько уловок, чтобы клонировать поля для создания дополнительных полей.Другой способ - всегда иметь 5 наборов полей и просто показать / скрыть наборы нужных вам полей.Удачи!