Question

In my solution at each selected elements on list JavaScript $.get template trought controller. It is not optimal. Is there any method to reduce requests? How to DRY for date fields in templates. Maybe exist better solution to get similar effect? I already tried jquery show/hide but hidden forms were also sent I decided to form from templates.

javascript:

$(document).ready(function () {
    $('#meeting_type_id').change(function () {
        var selected = $(this).val();
        if(selected==''){
            $("#time_form").html('');
        }else if(selected=='1' || selected=='2') {
            $.get('meetings/type_form/once', function(data){
                $("#time_form").html(data);
            });
        }else{
            $.get('meetings/time_form/many', function(data){
                $("#time_form").html(data);
            });
        }
        return false;
        // $('#time_form').html("= render (:partial => 'once')");
    });
});

controller:

def time_form
  type = params[:id]
  if type == "once"
    render :partial => 'once'
  else
    render :partial => 'many'
  end
end

templates:

/_once.html.haml/

%input{:name => "meeting[from]", :type => "date", :value => "2011-11-17"

/_many.html.haml/

%input{:name => "meeting[from]", :type => "date", :value => "2011-11-17"
%input{:name => "meeting[to]", :type => "date", :value => "2011-11-17"

view:

= collection_select(:meeting, :type_id, Type.all, :id, :type, :prompt => 'Please select type')
/generates:/
<select id="meeting_type_id" name="meeting[type_id]">
    <option value>Please select type</option>
    <option value="1">once in golf</option>
    <option value="2">once in pub</option>
    <option value="3">many in golf</option>
    <option value="4">many in pub</option>
</select>
<div id="time_form"></div>

Answer 1

You can use only client side:

$(document).ready(function () {
    $('#meeting_type_id').change(function () {
        var once = '<input type="date" name="meeting[from]" value="2011-11-17"/>';
        var many = '<input type="date" name="meeting[to]" value="2011-11-17"/>';

        var selected = $(this).val();
        if(selected==''){
            $("#time_form").html('');
        }else if(selected=='1' || selected=='2') {
            $("#time_form").html(once); 
        }else{
            $("#time_form").html(once+many);
        }
        return false;
    });
});