Question

Got a rails application that has a form (new action) with a select with an options value range from 1 to 5. When the users selects one of the options I need to use ruby “build” to build a number of objects depending on what the select value is.

So when the user selects 2 in the select box the following code needs to run:

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

Also when the users changes this value from 2 to 1 the code needs to be replaced with

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

Basically I’m having trouble finding a way to setting the value in jQuery and then updating it in the html. Getting the value is no problem, it’s how to dynamically change it in the html that’s the issue.

Any tips on how to proceed with this?

Thanks,
Amund

Edit – Clarification

I need this to happen before the form is submitted.

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

So any changes to the above needs to happen while the user is on the form page.

Answer 1

I’ve found a way that works, although it’s not pretty nor does it work if the user doesn’t have JS (In my case if the user don’t have JS they can gtfo).

Below is the code needed for it to work. (Keep in mind this works, but I’ve done nothing to make it more concise or better). ps. It looks like hell.

$('#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");
  });
}
});

Then in the model we do:

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

Where is_wanted is a hidden field in the form for each room. I’m sure there are prettier ways, but at least it works.

Any thoughts?